Vue3 Eingebaute Komponenten

In Vue.js gibt es einige integrierte globale Komponenten und integrierte Komponenten, die allgemeine Funktionalität und Layout-Unterstützung bieten und Entwicklern helfen, Anwendungsoberflächen schnell zu erstellen.

Im Folgenden finden Sie einige gängige integrierte Vue-Komponenten und ihre Funktionen:

1. component

<component>Es ist eine abstrakte Komponente, die verwendet wird, um verschiedene Komponenten oder Elemente dynamisch zu rendern.

Durch das Bindenisdes Attributs kann das Umschalten und Rendern dynamischer Komponenten erreicht werden.

<component :is="currentComponent"></component>

2. transitionundtransition-group

<transition>und<transition-group>Bietet die Funktionalität zum Implementieren von Übergängen und Animationen in Vue.js.

Durch das Definieren von CSS-Klassennamen für Übergänge können Sie die Animationseffekte von Elementen steuern, wenn diese in das DOM eintreten oder es verlassen.

<transition name="fade">
  <div v-if="show">Hello!</div>
</transition>

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

3. keep-alive

<keep-alive>Es ist eine abstrakte Komponente, die verwendet wird, um den Komponentenzustand zu erhalten oder mehrfaches erneutes Rendern zu vermeiden.

Wenn eine Komponente<keep-alive>umhüllt wird, wird ihr Zustand zwischengespeichert, anstatt bei jedem Wechsel erneut gerendert zu werden.

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

4. slot

<slot>Es ist eine Slot-Komponente in Vue.js, die zum Einfügen von Inhalten verwendet wird. Sie ermöglicht einer übergeordneten Komponente, Inhalte an bestimmte Slot-Positionen innerhalb einer untergeordneten Komponente zu übergeben, wodurch Komponenten flexibler und wiederverwendbarer werden.

<child-component>
  <template #header>
    <h2>Header Content</h2>
  </template>
  <template #default>
    <p>Default Content</p>
  </template>
</child-component>

5. teleport

<teleport>Ermöglicht es Ihnen, DOM-Elemente überall in der Anwendung zu rendern, ohne durch die aktuelle DOM-Struktur eingeschränkt zu sein. Dies ist sehr nützlich, wenn Sie Elemente in der Anwendung dynamisch verschieben müssen, z. B. das Rendern von Popup-Inhalten in einem Modal-Fenster.

<teleport to="body">
  <modal-dialog v-if="showModal">
    <!-- modal content -->
  </modal-dialog>
</teleport>

6. Suspense

<Suspense>Es ist eine in Vue.js 3.x neu hinzugefügte Komponente, die verwendet wird, um das Laden und den Status asynchroner Komponenten zu handhaben. Sie kann Platzhalterinhalte anzeigen, bevor die asynchrone Komponente mit dem Laden fertig ist, und Ladezustände und Fehler behandeln.

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>