Fermer

juillet 8, 2019

Tout ce que vous devez savoir sur les machines à sous dans Vue.js


Découvrez tout ce que vous devez savoir sur l'utilisation des emplacements dans Vue.js pour créer des composants personnalisables et réutilisables pour vos applications.

En un mot, pourquoi devrais-je me soucier des emplacements?

Lorsque vous créez des composants réutilisables avec Vue.js, vous devrez peut-être injecter du contenu à partir du parent. Cela peut inclure, par exemple, l'inclusion de balises HTML ou même de composants dans des parties spécifiques.

Si vous ne savez pas comment procéder, la bonne nouvelle est que, après avoir lu cet article, vous comprendrez la plupart des informations que vous devriez connaître. une fonctionnalité pratique de Vue.js: les slots.

Quand j'ai commencé avec Vue.js, je n'utilisais pas beaucoup les slots. Mais pour être honnête avec vous, c’est l’une de mes caractéristiques préférées. Cela facilite tellement les choses lors de la construction de popups ou de boîtes à conteneurs. Je me suis même surpris à les utiliser pour des choses plus créatives, comme dédier un emplacement gauche et un emplacement droit à côté de chaque option de mon composant select personnalisé. De cette façon, je peux injecter ce que je veux, comme un smiley, une image ou un texte supplémentaire.

Notes : Dans la plus récente version de Vue minor (2.6), Evan You en annonçait mises à jour majeures de la fonctionnalité. Il vient maintenant avec une nouvelle syntaxe et des améliorations de performances. Vous pouvez en lire plus à ce sujet ici . Nous adopterons cette nouvelle syntaxe tout au long de cet article.

Notions de base

1. Le logement par défaut

Commençons par le logement par défaut. Lorsque vous ne spécifiez aucun nom dans votre emplacement, Vue le fait pour vous et l'appelle «par défaut».

Dans l'exemple ci-dessous, nous avons également défini du contenu de secours. Cela apparaîtra lorsque nous n'avons défini aucun contenu dans le composant parent. Vous pouvez laisser la balise vide si vous n'avez pas besoin d'afficher la solution de repli.

Composant parent 

 < template > 
	 < MyChildComponent > 
		 < h1 >  J'injecte du contenu dans l'emplacement par défaut  </  h1 > 
	 </  MyChildComponent > 
 </  modèle >

Composant enfant 

 < template > 
	 < div   class  =  " Composant my-child  ] " > 
		 < fente > 
 < h1 > 
Si aucun emplacement n'est spécifié dans le parent, ce texte de repli apparaîtra.
 </  h1 > 
		 </  L'emplacement > 
	 </  div > 
 </  modèle >

Donc, pour un composant avec une présentation de base, cela fonctionne très bien. Mais la vie est compliquée, de même que nos composants… 1965

2. Les machines à sous nommées

Présentation des machines à sous nommées, mesdames et messieurs! ?

Composant parent 

 < template > 
	 < ArticleTemplate > 
		 < template   # header > 
 < h1 >  En-tête de page  </  h1 > 
		 </  modèle > 

 < h3 >  Titre de l'article  </  h2 > 
		 < p >  Contenu de l'article  </  p > 

 < template   #footer > 
 < p >  Pied de page  </  p > 
		 </  template > 
	 </  ] ArticleTemplate > 
 </  modèle >

Composant enfant 

 < template > 
	 < header > 
		 < slot   nom  = [19659014] ""  header  "  /> 
	 </  header > 

 < main > 
		 < img   src  =  " logo.png "  "  /> 
		 < slot   /> 
		 < Auteur du composant   /> 
	 </  principal > 

 < footer > 
		 < slot   name  =  " footer "   /> 
	 ] </  footer > 
 </  modèle >

Comme vous pouvez le deviner, les emplacements nommés vous permettent d'injecter des bits de contenu dans différentes parties du composant enfant (directement à partir du composant parent).

Note: Le #name est arrivé. remplacer l'ancienne syntaxe de v-slot = "name" .

Nous n'avons pas attribué de nom à la deuxième fente (celle située entre l'image et AuthorComponent . C’est aussi la raison pour laquelle nous n’avons pas besoin de l’envelopper dans une balise template.

Cependant, nous avons toujours un petit problème: que faire si le composant parent a besoin d’accéder aux données ou aux méthodes contenues dans le fichier Composant enfant?

3. Les emplacements affectés

Supposons par exemple que vous avez une liste de fruits (avec toute la logique qui la gère) et que vous souhaitez les restituer différemment selon la page dans laquelle vous vous trouvez. 19659004] Squeezy au citron facile! ?

Composante pour enfant 

 < template > 
	 < ul > [19659017] < li   v-for  =  " fruit en fruit "  : clé  =  " fruit.id  " > 
 < slot  : fruit  =  " fruit "  : tranche  =  " tranche 

 "
  /> 
		 </  li > 
	 </  ul > 
 </  modèle > 
 
   < script > 
 export   default   {
accessoires :   {
fruits :   {
type :  Tableau 
requis :   true 
		} 
	} 

methodes :   {
		 slice  ( id )   {
			
		 
	} 
} 
 < /  script >

Maintenant, en utilisant l'attribut #fruit = "{fruit, slice}" nous obtenons deux choses: le composant parent indique au composant enfant le logement dont il a besoin ET appelle les accessoires qu'il utilisera.

Composant parent 

 < template > 
	 < FruitList  : fruits  =  " fruitsOfTheNinja  " > 
		 < template   #default  = "  {fruit, slice}  " > [19659019]
{{fruit.name}}

 < button   @click  =  " slice (fruit.id) "  > 
⚔️ Style Trancher
 </  bouton > 
		 </  template > 
	 </  Liste de fruits > 
 </  modèle > 
 
   < script > 
 export   default   {
	 données  ()   {
		 retour   {
fruitsOfTheNinja :   [
				 {
id :   1 
nom :   'Lemon' 
				} 
				 {
id :   2 
nom :   'Kiwi' 
				} 
				 {
id :   3 
nom :   '?Peach' 
				} 
				 {
id :   4 
nom :   '?Banana' 
				} 
				 {
id :   5 
nom :   '?Apple' 
				} 
			] 
		} 
	} 
} 
 [ /  script >

] Et juste comme ça, notre composant parent peut implémenter sa propre présentation ou utiliser des méthodes du composant enfant. ?

Mais que se passe-t-il si vous devez nommer dynamiquement vos créneaux horaires et pourquoi voudriez-vous le faire? Eh bien… Il se peut qu’à un moment donné, chaque élément du tableau que vous alimentez avec le composant enfant soit différent.

4. Présentation de… Sl Slots à portée dynamique

Supposons que notre chef crée des recettes pour le tableau de fruits que nous avons utilisé précédemment. Mais il n'a pas eu assez de temps pour créer sa recette pour chaque fruit répertorié.

Alors, comment ne montrer que les recettes pour celles qui ont été préparées?

Composante pour enfants 

 < template > 

	 < ul > 

		 < li   v-for  =  " fruit en fruit "  ] : clé  =  " fruit.id "  > 

 < slot   name  =  " fruit "  : fruit  =  " fruit  fruit  ] " : slice  = "  slice  "  /> 

 < slot   name  =  " recette "  : fruit  =  " fruit








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link