Slots <slot> de Vue3
Vue3 API des optionsDans Vue3, les slots sont un mécanisme qui permet à un composant parent de transmettre du contenu à un composant enfant. Vous pouvez considérer un slot comme un "emplacement réservé" dans un composant enfant, où le composant parent peut insérer n'importe quel contenu. Ainsi, le composant enfant peut afficher de manière flexible le contenu transmis par le parent sans modifier sa propre structure.
Utilisation de base des slots
Emplacement par défaut
L'emplacement par défaut est le type d'emplacement le plus simple. Dans un composant enfant, vous pouvez utiliser<slot>la balise pour définir un emplacement par défaut. Lorsque le composant parent utilise le composant enfant, il peut insérer du contenu dans cet emplacement.
Exemple
<template>
<div class="child">
<h3>Ceci est le titre du composant enfant</h3>
<slot>Contenu par défaut</slot>
</div>
</template>
Exemple
<template>
<ChildComponent>
<p>Ceci est le contenu transmis par le composant parent</p>
</ChildComponent>
</template>
Dans le composant parent, nous pouvons<ChildComponent>insérer du contenu à l'intérieur de la balise, et ce contenu remplacera la<slot>balise dans le composant enfant. Si le composant parent ne transmet pas de contenu, le composant enfant affichera le<slot>contenu par défaut à l'intérieur de la balise.
Slots nommés
Les slots nommés vous permettent de définir plusieurs slots dans un composant enfant et de les distinguer par leur nom. Dans le composant parent, vous pouvez utiliser lav-slotdirective pour spécifier dans quel slot insérer du contenu.
Exemple
<template>
<div class="child">
<header>
<slot name="header">Contenu d'en-tête par défaut</slot>
</header>
<main>
<slot>Contenu de corps par défaut</slot>
</main>
<footer>
<slot name="footer">Contenu de pied de page par défaut</slot>
</footer>
</div>
</template>
Exemple
<template>
<ChildComponent>
<template v-slot:header>
<h1>Contenu d'en-tête personnalisé</h1>
</template>
<p>Il s'agit du contenu du corps transmis par le composant parent</p>
<template v-slot:footer>
<p>Contenu de pied de page personnalisé</p>
</template>
</ChildComponent>
</template>
Dans l'exemple ci-dessus, nous avons défini trois slots :header、main(slot par défaut) etfooter. Le composant parent utilise lav-slotdirective pour insérer du contenu dans le slot correspondant.
Slots avec portée
Les slots avec portée permettent à un composant enfant de transmettre des données au composant parent, et le parent peut rendre du contenu en fonction de ces données. C'est très utile lorsque vous devez personnaliser la logique de rendu à l'intérieur du composant enfant.
Utilisation de base
Dans un composant enfant, vous pouvez utiliserv-bindpour transmettre des données au slot. Le composant parent peut alors utiliser lav-slotdirective pour recevoir ces données.
Exemple
<template>
<div class="child">
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: 'Alice', age: 25 }
};
}
};
</script>
Exemple
<template>
<ChildComponent v-slot="{ user }">
<p>Nom d'utilisateur : {{ user.name }}</p>
<p>Âge de l'utilisateur : {{ user.age }}</p>
</ChildComponent>
</template>
Dans cet exemple, le composant enfant transmet lev-bindvauserau slot, et le composant parent utilise lev-slot="{ user }"pour recevoir cet objet, et affiche le contenu en fonction de lauserdonnées.
Autres extensions