Même si les props sont très puissantes, elles ajoutent un niveau de complexité dans l'interaction avec un composant, puisqu'elles demandent un certain niveau de connaissance afin d'utiliser le composant de manière adéquate. De plus, on peut facilement se retrouver au milieu d'un « bazar de props » lorsqu'un composant a besoin de plusieurs props pour fonctionner correctement.
<custom-banner size="small" left-icon="info" text="Hello" />Dans le cas où votre composant nécessiterait une solution plus flexible, Vue peut vous aider avec la technique des slots.
Découvrez les slots
L'élément <slot> sert d'emplacement pour du contenu que le développeur peut définir dynamiquement sans props prédéterminées.
Prenons un exemple. À l'aide du composant custom-banner, nous voulons que les utilisateurs puissent définir différentes bannières personnalisées. L'idée ici est justement d'éviter notre bazar de props. Par exemple, imaginons que nous voulions que notre composant CustomBanners rende le résultat suivant :
<div class="small">
<p><icon name="info" /> Bannière d'information</p>
</div>
<div class="small">
<p><icon name="warning" />Bannière de warning<icon name="warning" /></p>
</div>Si cela avait été réalisé uniquement avec des props, le résultat pourrait ressembler à ceci :
<custom-banner
size="small"
left-icon="info"
text="Bannière information"
/>
<custom-banner
size="small"
left-icon="warning"
text="Bannière attention"
right-icon="warning"
/>Plus important encore, le bloc Template du composant CustomBanner ressemblerait à ceci :
src/components/CustomBanner.vue
<template>
<div :class="size">
<p><icon v-if="leftIcon" :name="leftIcon" /> {{ text }} <icon v-if="rightIcon" :name="rightIcon" /></p>
</div>
</template>Même dans cet exemple simple, le bloc Template semble déjà assez difficile à lire. Alors que si on avait utilisé des slots...
src/components/CustomBanner.vue
<template>
<div :class="size">
<slot></slot>
</div>
</template>Et voilà ! Comme vous pouvez le voir, le slot devient un espace ouvert où le développeur peut passer n'importe quel contenu personnalisé, sans avoir besoin d'utiliser un grand nombre de conditions pour gérer différents scénarios de props.
Définissez le contenu par défaut d'un slot
De la même façon qu'il est possible de définir une valeur par défaut pour les props, vous pouvez également définir le contenu par défaut d'un slot. C'est particulièrement utile lorsque vous souhaitez afficher un contenu standard, à moins que le développeur ne définisse un contenu personnalisé.
Pour donner un contenu par défaut à notre CustomBanner, tout ce que nous avons à faire est de placer le contenu par défaut à l'intérieur des balises slot dans le bloc Template.
<template>
<div :class="size">
<slot>Bonjour !</slot>
</div>
</template>Découvrez comment utiliser plusieurs slots
Vous vous demandez peut-être aussi : « Et si je veux utiliser plusieurs slots dans un composant ? » Et ce serait une excellente question ! 🕵️♀️🕵️♂️ Prenons l'exemple d'un simple composant Card :
<template>
<div class="card">
<h2>Titre de la carte</h2>
<p>Texte de la carte</p>
<button>Action</button>
</div>
</template>Dans ce composant, nous utilisons des props pour effectuer la configuration, mais nous savons que ce sera un cauchemar à gérer s'il s'agrandit. Ici, trois slots différents pourraient être définis par un développeur. Pour résoudre ce problème, nous avons besoin de slots nommés.
Les slots nommés permettent d'attribuer des noms aux slots afin que les développeurs puissent s'y référer plus tard. Ainsi, dans l'instance de notre composant Card, nous donnons simplement une prop name à chaque slot.
<template>
<div class="card">
<slot name="title">Titre de la carte</slot>
<slot name="text">Texte de la carte</slot>
<slot name="action">Action</slot>
</div>
</template>Lorsque nous voulons invoquer notre composant (à partir de la v2.6 de Vue.js et plus), il suffit d'utiliser la directive v-slot sur un élément template comme ici :
<template>
<Card>
<template v-slot:title>
<h3>Donner des noms aux slots est utile</h3>
</template>
<template v-slot:text>
<p>Maintenant, on peut ajouter ce que l'on veut ici en donnant le nom du slot !</p>
</template>
<template v-slot:action>
<a href="#">En savoir plus</a>
</template>
</Card>
</template>Entraînez-vous
Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier cafe-with-a-view. Pour commencer, consultez la branche P3C4-Begin.
Instructions
Refactorez le composant BaseButton en utilisant des slots plutôt que les props qui sont définies pour le moment.
En résumé
Dans ce chapitre, vous avez découvert :
les difficultés induite par le bazar de props ;
la définition de slots sur des composants ;
la définition de contenu par défaut dans les slots ;
l'utilisation de slots nommés pour gérer plusieurs slots.
Rendez-vous dans le prochain chapitre pour passer en revue ce que nous avons appris dans cette partie du cours ! 🚀
