Un aperçu des slots à portée de Vue

Dans notre aventure précédente, nous avons examiné les slots de base de Vue . Les slots scoped nous permettent d'exposer une donnée, à travers le scope, au parent qui l'utilise.

Dans la dernière partie de cet article nous avons examiné la forme la plus basique de [19659003]. Nous avons appris à créer des composants de base qui permettent de leur transmettre toute sorte de structure et de données, et nous avons examiné comment créer des composants multi-slots.

Cette fois, nous allons examiner les éléments de base la soeur amplifiée de la fente à portée.

La magie des fentes à lunette

Imaginez que vous construisez un jeu de cartes Pokemon et que vous voulez avoir un composant qui a des emplacements par défaut pour ce qui est affiché sur la carte. Mais vous voulez aussi donner le contrôle au parent des informations qui sont rendues dans cet espace, par exemple, sur la zone de contenu principale de la carte.

Vous pensez peut-être, facile, je viens de définir un contenu par défaut dans le placez dans puis remplacez-le sur le parent, qui est exactement là où je veux que votre état d'esprit soit – Pokemon. Vous êtes coincé dans une boucle v-for à travers un tableau de données. Comment allez-vous gérer un événement qui modifie ce contenu par défaut? Allez-vous capturer le Pokémon actuel dans la boucle et le stocker dans une variable? Passez-le à une méthode?

Les emplacements à portée nous permettent d'exposer une donnée, à travers la portée, au parent qui l'utilise. Imaginez ce qui suit:

1. Vous créez le composant et vous lui donnez un état interne pokemon .
2. Ce fait un appel aléatoire à l'API et récupère un Pokémon pour lui-même.
3. Votre expose un emplacement de nom qui est défini par défaut sur le nom du Pokémon.
4. Vous voulez que le parent puisse remplacer ces informations, mais vous ne savez pas quel est l'intérieur de la carte. Nous allons exposer ces informations à travers un emplacement à portée.
5. Maintenant que votre emplacement à portée expose le pokemon vos parents peuvent le saisir et l'utiliser au besoin.

Créer la carte de démonstration

] Afin de mieux comprendre le fonctionnement du slot scoped, créons la carte dans l'exemple ci-dessus. Nous allons utiliser l ' API Pokemon pour cela!

Nous allons créer une carte mieux nommée appelée . Le code de base sera le suivant.

 < template > 
   < div >  {{pokemon.name}}  </  div > 
 </  modèle > 

 < script >  
 import  axios  de   "axios" ; 
 export   default   {
   data  ()   { 
     retour   {
      pokemon :   null 
    } ; 
  } 
   created  ()   {
    axios .  get  (
       `https://pokeapi.co/api/v2/pokemon/  $ { Math .  round  ] ( Math .  random  ()   *   150 ) }   "
    ) .  puis  ( result  =>   {
       this .  pokemon  =  result .  données ; 
    } ) ; 
  } 
} ; 
  </  script > 
 

Nous importons Axios parce que nous allons l'utiliser comme bibliothèque de référence pour faire l'appel asynchrone au point de terminaison de l'API.

Ensuite, dans le créé méthode, nous utilisons la méthode get d'Axios pour faire un appel au point final du PokeAPI qui renverra les données d'un Pokémon. Si vous souhaitez consulter la documentation de cet endpoint, vous pouvez visiter la page officielle ici .

Cette méthode get pour Axios renvoie une promesse JavaScript Promise . Je ne vais pas entrer dans le détail sur leur fonctionnement, mais si vous voulez vous rafraîchir, voici le lien vers la page MDN sur les promesses .

Dans le puis bloc de la promesse, nous capturons le résultat de l'appel. Notez que axios encapsulera ce résultat dans un objet qui lui est propre, nous devons donc accéder aux informations via la propriété data . Ceci, en retour, contiendra les informations que l'API nous donne, c'est-à-dire les données réelles de Pokemon.

Enfin, nous jetons simplement le [pokemon.name] (http://pokemon.name) dans voir pour le moment.

Accédez à votre App.vue ou à l'endroit où vous allez effectuer le rendu, et créons une boucle pour présenter la carte.

 < template > 
   < div   id  =  " app "  > 
     < PokeCard  : clé  =  " i "   v-for  =  " i in 20  "  /> 
   </  div > 
 </  modèle > 

 < script >  
 import  PokeCard  from   "./ components / PokeCard" ; 

 export   default   {
  nom :   "App" 
  composants :   {
    PokeCard
  } 
} ; 
  </  script > 

 < style >  
  #app   {
   font-family :   "Avenir" Helvetica, Arial, sans-serif ; 
   - webkit-font-smoothing :  anti-crénelé ; 
   -moz-osx-font-smoothing :  grayscale ; 
   text-align :  centre ; 
   couleur :   # 2c3e50 ; 
   margin-top :   60  px ; 
 } 
  </  style > 
 

N'oubliez pas d'ajouter l'attribut : key ! Si vous voulez un rappel sur ce qu'est la clé et pourquoi elle est très importante, vous pouvez consulter mon article sur la clé ici .

Le La boucle v-for dans l'exemple précédent rendra 20 s différents à l'écran, n'hésitez pas à ajuster si nécessaire. Une fois que vous l'avez chargé dans votre navigateur, vous devriez voir apparaître 20 noms de Pokémon.

Making it «Pretty»

Je dis «joli» entre les guillemets parce que mes compétences en design sont à peu près aussi bonnes que ma cuisine. Procédez à vos risques et périls et commandez une pizza.

Après quelques bidouilles, j'ai trouvé ce qui suit pour notre belle PokeCard . N'hésitez pas à en faire une œuvre d'art et à me montrer comment cela est fait à @marinamosti . : D

 < template > 
   < div   class  =  " card "  > [19659028]
     < div   class  =  " name "  >  {{pokemon.name}}  </  div > 
     < div > 
       < img  : src  =  " pokemon.sprites.front_default "  > 
     </  div > 
     < div   class  =  " types "  > 
       < ul > 
         < li   v-for  =  " tapez pokemon.types "  : key  =  "  type.slot  " >  {{type.type.name}}  </  li > 
       </  ul > 
     </  div > 
   </  div > 
 </  modèle > 

 < script >  
 import  axios  de   "axios" ; 
 export   default   {
  data  ()   { 
     retour   {
      pokemon :   null 
    } ; 
  } 
   created  ()   {
    axios
      .  get  (
         `https://pokeapi.co/api/v2/pokemon/  $ { Math .  round  ( Math .  random  ()   *   150 ) }   "
      ) 
      .  puis  ( result  =>   {
         this .  pokemon  =  result .  données ; 
      } ) ; 
  } 
} ; 
  </  script > 

 < style   lang  =  " scss "   scoped >  
  .card   {
   bordure: 1px noir uni;
  rayon de la bordure: 10px;
  marge: 0 auto;
  marge inférieure: 2rem;
  affichage: bloc en ligne;

   .name   {
     text-transform :  capitalize ; 
     padding :   2  rem  0 ; 
  } 

   .types   {
     ul  {
       margin :   0 ; 
       padding  ]:   0 ; 
       style liste :  aucun ; 
    } 
  } 
} 
  </  style > 
 

J'ai ajouté quelques