À quoi servent les slots dans Vue et comment…

Les slots dans Vue sont utilisés pour insérer du contenu externe dans des composants. Cela permet de créer des composants flexibles et réutilisables.

Il existe trois types de slots :

Slots par défaut (Default Slots) : Utilisés pour insérer le contenu principal.

<template>
  <div>
    <slot></slot>
  </div>
</template>

Utilisation :

<mon-composant>
  <p>Ce contenu sera inséré dans le slot par défaut.</p>
</mon-composant>

Slots nommés (Named Slots) : Permettent d’insérer du contenu dans des slots spécifiques du composant, différenciés par leur nom.

<template>
  <div>
    <slot name="header"></slot>
    <div>Contenu principal du composant</div>
    <slot name="footer"></slot>
  </div>
</template>

Utilisation :

<mon-composant>
  <template v-slot:header>
    <h2>Titre</h2>
  </template>
  <template v-slot:footer>
    <p>Pied de page</p>
  </template>
</mon-composant>

Syntaxe abrégée pour v-slot :

<mon-composant>
  <template #header>
    <h2>Titre (syntaxe abrégée)</h2>
  </template>
</mon-composant>

Slots avec portée limitée (Scoped Slots) : Permettent au composant enfant de transmettre des données au composant parent via le slot. Le parent peut utiliser ces données lors du rendu du contenu du slot.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

Utilisation :

<ma-liste :items="['Pomme', 'Banane', 'Orange']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</ma-liste>

Destructuration de slotProps :

<ma-liste :items="['Pomme', 'Banane', 'Orange']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destructuration)
  </template>
</ma-liste>

Les slots créent des "espaces" dans le template du composant enfant, où le parent peut insérer son propre contenu. Lors du rendu, Vue remplace la balise <slot> (ou <slot name="...">) par le contenu fourni par le composant parent. Pour les slots avec portée, les données du composant enfant sont accessibles via l'objet d'arguments de la template du slot dans le composant parent.

À quoi servent les slots dans Vue et comment fonctionnent-ils?