Slots permettent à un parent de passer du contenu de template dans un composant enfant — c'est comment vous construisez des wrappers flexibles et réutilisables (cartes, modales, layouts) où le consommateur contrôle le markup interne.
<!-- Card.vue -->
<template>
<div class="card">
<slot></slot> <!-- parent's content is injected here -->
</div>
</template>
<!-- parent -->
<Card>
<h2>Title</h2> <!-- this markup fills the slot -->
<p>Any content!</p>
</Card>
L'enfant définit un « trou » (<slot>) ; le parent le remplit avec n'importe quel markup qu'il souhaite. C'est bien plus flexible que de passer des chaînes via des props.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main> <!-- the default slot -->
<footer><slot name="footer"></slot></footer>
</template>
<!-- parent uses #name (shorthand for v-slot:name) -->
<Layout>
<template #header><h1>My App</h1></template>
<p>Main content (default slot)</p>
<template #footer><small>© 2024</small></template>
</Layout>
Parfois l'enfant a des données dont le slot du parent a besoin (par ex. chaque élément dans une liste). Les scoped slots exposent les données de l'enfant au template du parent :
<!-- List.vue — exposes each item to the slot -->
<template>
<li v-for="item in items" :key="item.id">
<slot :item="item" :index="index"></slot> <!-- pass data to the slot -->
</li>
</template>
<!-- parent receives the data via v-slot -->
<List :items="users">
<template #default="{ item }">
{{ item.name }} — {{ item.email }} <!-- parent decides how to render each item -->
</template>
</List>
Les scoped slots sont la clé des composants renderless/headless : l'enfant gère la logique (boucles, récupération, état) et laisse le parent contrôler complètement la présentation.
Les slots sont le mécanisme de distribution de contenu de Vue — essentiel pour les composants de layout et wrapper réutilisables.
Les slots nommés offrent plusieurs points d'insertion, et les scoped slots (exposant les données enfants aux templates définis par le parent) permettent des motifs puissants comme les composants headless et les listes/tables personnalisables.
C'est ce qui rend les composants Vue compositionnels plutôt que rigides.