Un premier regard sur les slots Vue

Les slots de Vue sont extrêmement polyvalents une fois que vous savez comment les utiliser. Apprenons à les connaître en fabriquant un sandwich.

Vue est l'un des outils les plus puissants qui soient en termes de composition de composants. Les emplacements vous permettent d'injecter n'importe quel type de contenu dans un composant, de fournir une valeur par défaut et même d'exposer les données d'un composant enfant à un parent.

La courbe d'apprentissage, cependant, peut être un peu intimidante. Regardons de plus près les slots ensemble.

Slot, Ya Basic

Dans Vue, nous avons deux «types» de slots différents. L'emplacement simple régulier et l'emplacement à portée plus complexe. Afin de bien comprendre les créneaux horaires, nous devons d'abord avoir une bonne compréhension des plus simples.

Mettons-nous dans l'ambiance. Oubliez Vue pendant une seconde et parlons du HTML de base. Cela n’est pas plus simple qu’une balise

alors regardons cela.

 < p >  Le gâteau est un mensonge, sauf quand ce n’est pas le cas. Ensuite, vous nommez. Vous NOM difficile.  </  p > 
 

Regardez bien cet exemple. Vous avez une balise

avec du contenu entre les deux. On peut même le rendre un peu plus «intéressant» (😴), en ajoutant une balise imbriquée. Allons-y avec un .

 < p > 
Le gâteau est un mensonge, sauf quand ce n'est pas le cas. Ensuite, vous nommez.
 < span   class  =  " seriousNomming "  >  You NOM hard.  </  span > 
 </  p > 
 

Si je vous disais de me dire ce qui se passe ici, vous le décririez probablement comme une balise contenant du contenu. Droite? Et la balise

elle-même a un comportement défini. Nous savons en tant que programmeurs frontaux que la balise

s'affichera généralement comme un élément de bloc avec des marges prédéfinies. Il a quelques propriétés et un comportement prédéfini.

Un exemple de composant

Bon, maintenant commutons les vitesses et pensons en termes de composants. Prenons l'exemple suivant:

 < Sandwich > 
 < Avocat   /> 
 < Fromage   /> 
 < Jambon   /> 
 </  Sandwich > 
 

Si une fois de plus nous essayions de décrire ce qui se passe ici, nous pourrions facilement dire qu'il y a un composant Sandwich qui va afficher un 🥑, 🧀 et 🐷. Mais comment créer exactement un tel composant? Comment pouvons-nous le dire: Hé, je veux que vous ( Sandwich ) puissiez contenir n'importe quelle sorte d'ingrédients / contenus.

Un tel composant s'écrirait de cette façon:

 // Sandwich.vue

 < modèle > 
   < div   class  =  " pain "  > 
     < emplacement  /> 
   </  div > 
 </  modèle > 

 < style >  
  .bread   {
   border-top :   3  px solid brown ; 
   border-bottom : [19659068] 3  px brun uni ; 
} 
  </  style > 
 

Génial! Maintenant, si vous utilisez réellement ce composant avec l'exemple précédent, vous obtiendrez un résultat souhaité (mais finalement moche, ne me jugez pas), comme suit.

 < Sandwich > 
    🥑
    🧀
    🐷
 </  Sandwich > 
 

Où exactement se passe la magie en termes de Vue?

Le composant réservé expose un espace où le composant rendra toute entrée qui lui est donnée. N'IMPORTE QUELLE entrée. Cela signifie que vous pouvez mettre du texte, des éléments HTML et même d'autres composants à l'intérieur des balises et tout sera transmis au composant. Bien, non?

Il y a une chose importante à considérer: un composant peut en fait avoir plus d'un élément ! Nous allons bientôt regarder un exemple, mais comment sait-il maintenant lequel utiliser?

Le comportement par défaut de le marque comme un emplacement par défaut . Cela signifie que le simple fait d'écrire signifie en fait

Contenu de l'emplacement par défaut

Il y a deux choses que nous voulons retoucher ici: le contenu par défaut et les emplacements supplémentaires. Examinons d'abord le contenu par défaut.

Si nous voulions faire de notre sandwich par défaut un sandwich à l'avocat, nous pourrions apporter une petite modification à notre composant comme suit.

 < template > [19659012]
   < div   class  =  " pain "  > 
     < emplacement > 
      🥑
     </  emplacement > 
   </  div > 
 </  modèle > 
 

Voyez comment il y a maintenant du contenu par défaut entre les balises ? Cela deviendra le contenu par défaut de cet emplacement. Cela signifie que si quelqu'un devait implémenter un composant Sandwich sans aucun contenu, il obtiendra un avocat dans la sortie.

  // Affiche 🥑 entre le "pain"

Une autre fonctionnalité puissante que Vue nous offre avec les slots est appelée slots. Parfois, vous vous retrouverez dans une situation où vous voudrez pouvoir donner à l'utilisateur de votre composant la possibilité d'afficher du contenu personnalisé à plusieurs endroits différents de votre composant.

Dans de tels cas, les emplacements nommés sont votre ami. Prenons notre exemple de sandwich. Peut-être voulez-vous pouvoir exposer une fente sur le dessus du pain qui permettra certaines options de grillades.

Notre composant après quelques modifications mineures ressemblera à ceci.

Remarquez comment notre nouveau ] L'élément slot a l'attribut de name mis à griller. Ce nom est la référence que les personnes utilisant notre composant appelleront lors de l'ajout de contenu à cette partie particulière de celui-ci. N'oubliez pas que vous pouvez ajouter autant d'emplacements nommés que vous le souhaitez. De plus, les mêmes règles s'appliquent – les emplacements nommés peuvent avoir leur propre contenu par défaut.

Maintenant, pour mettre réellement ce nouvel emplacement en service, nous devons utiliser une syntaxe spéciale à l'intérieur du composant parent qui instancie le . Vous allez ajouter un nouvel élément