Vue3 Composants intégrés

Dans Vue.js, il existe des composants globaux intégrés et des composants intégrés qui fournissent des fonctionnalités courantes et une prise en charge de la mise en page, aidant les développeurs à construire rapidement des interfaces d'application.

Voici quelques composants intégrés courants de Vue et leurs fonctions :

1. composant

<component>C'est un composant abstrait utilisé pour effectuer le rendu dynamique de différents composants ou éléments.

En liantisl'attribut, le basculement et le rendu des composants dynamiques peuvent être réalisés.

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

2. transitionettransition-group

<transition>et<transition-group>Fournit la fonctionnalité permettant d'implémenter des transitions et des animations dans Vue.js.

En définissant des noms de classes CSS pour les transitions, vous pouvez contrôler les effets d'animation des éléments lorsqu'ils entrent ou sortent du DOM.

<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>C'est un composant abstrait utilisé pour préserver l'état d'un composant ou éviter de multiples re-rendus.

Lorsqu'un composant est<keep-alive>enveloppé, son état sera mis en cache au lieu d'être rendu à nouveau à chaque basculement.

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

4. slot

<slot>C'est un composant de slot dans Vue.js utilisé pour insérer du contenu. Il permet à un composant parent de transmettre du contenu dans des positions de slot spécifiques au sein d'un composant enfant, rendant les composants plus flexibles et réutilisables.

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

5. teleport

<teleport>Permet d'effectuer le rendu d'éléments DOM n'importe où dans l'application, sans être limité par la structure DOM actuelle. C'est très utile lorsque vous devez déplacer dynamiquement des éléments dans l'application, par exemple pour afficher le contenu d'une fenêtre contextuelle dans une boîte modale.

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

6. Suspense

<Suspense>C'est un composant nouvellement ajouté dans Vue.js 3.x, utilisé pour gérer le chargement et le statut des composants asynchrones. Il peut afficher un contenu d'espace réservé avant que le composant asynchrone ne termine son chargement, et gérer les états de chargement et les erreurs.

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