• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/04/2021

Créez des composants flexibles en utilisant les slots

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 ! 🚀

Exemple de certificat de réussite
Exemple de certificat de réussite