Guide du débutant pour l'utilisation de composants dans Vue –

L'un des aspects les plus intéressants de l'utilisation de Vue est son approche basée sur les composants pour la création d'interfaces utilisateur. Cela vous permet de diviser votre application en éléments plus petits et réutilisables (composants) que vous pouvez ensuite utiliser pour créer une structure plus complexe.

Dans ce guide, je vous propose une introduction de haut niveau à l'utilisation de composants en Vue Nous verrons comment créer des composants, comment transmettre des données entre composants (via des accessoires et un bus d'événement), et comment utiliser l'élément Vue pour afficher du contenu supplémentaire dans un composant.

Chaque exemple sera accompagné. par une démonstration exécutable de CodePen.

Comment créer des composants dans Vue

Les composants sont essentiellement des instances Vue réutilisables portant un nom. Il existe différentes manières de créer des composants dans une application Vue. Par exemple, dans un projet de taille petite à moyenne, vous pouvez utiliser la méthode Vue.component pour enregistrer un composant global, comme ceci:

 Vue.component ('my-counter', {
  Les données() {
    revenir {
      compte: 0
    }
  },
  modèle: `
 {{count}} 
`
})

nouvelle Vue ({el: '#app'})

Le nom du composant est my-counter . Il peut être utilisé comme suit:

Lorsque vous nommez votre composant, vous pouvez choisir un boîtier kebab ( my-custom-Component ) ou un boîtier Pascal ( MyCustomComponent ). Vous pouvez utiliser l'une ou l'autre variante lorsque vous référencez votre composant à partir d'un modèle, mais lorsque vous la référencez directement dans le DOM (comme dans l'exemple ci-dessus), uniquement le nom de balise de casse de kebab est valide.

Notez également que, dans l'exemple ci-dessus, data est une fonction qui renvoie un littéral d'objet (par opposition à un littéral d'objet lui-même). Ainsi, chaque instance du composant reçoit son propre objet data et ne doit pas partager une instance globale avec toutes les autres instances.

Il existe plusieurs façons de définir un modèle de composant. Nous utilisons ci-dessus un libellé de modèle, mais nous pourrions également utiliser un

Un composant MyCounter pourrait ressembler à ceci:

Comme vous pouvez le constater, lorsque vous utilisez des composants à fichier unique, il est possible de les importer et de les utiliser directement dans les composants où ils sont nécessaires.

Dans ce guide, je présenterai tous les exemples à l'aide de Vue.component () méthode d'enregistrement d'un composant

L'utilisation de composants à fichier unique implique généralement une étape de construction (par exemple, avec Vue CLI). Si vous souhaitez en savoir plus sur ce sujet, consultez le «Guide de débutant de Vue CLI» dans cette série Vue.

Transmission de données à des composants via des accessoires

Les accessoires nous permettent de transmettre des données d'un composant parent à composant enfant. Cela permet à nos composants d'être en plus petits morceaux pour gérer des fonctionnalités spécifiques. Par exemple, si nous avons un composant de blog, nous pouvons souhaiter afficher des informations telles que les détails de l'auteur, les détails de l'article (titre, corps et images) et les commentaires.

Nous pouvons les décomposer en composants enfants, de sorte que chaque composant gère des les données, donnant l’arborescence des composants comme ceci:

Si vous n’êtes toujours pas convaincu des avantages de l’utilisation de composants, prenez le temps de réaliser à quel point ce type de composition peut être utile. Si vous revisitez ce code ultérieurement, la structure de la page et l'endroit où (c'est-à-dire dans quel composant) vous devriez immédiatement rechercher quelle fonctionnalité. Cette façon déclarative de composer une interface facilite également la tâche de quelqu'un qui n'est pas familiarisé avec une base de code et qui devient rapidement productif.

Toutes les données étant transmises du composant parent, elles peuvent ressembler à ceci: :

 new Vue ({
  el: '#app',
  Les données() {
    revenir {
      auteur: {
        nom: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})

Le composant ci-dessus définit les détails de l'auteur et les informations de post. Ensuite, nous devons créer le composant enfant. Appelons le composant enfant auteur-détail . Notre modèle HTML se présentera donc comme suit:

Nous passons le composant enfant à l’objet auteur comme accessoires avec le nom propriétaire . Il est important de noter la différence ici. Dans le composant enfant, owner est le nom de l'accessoire avec lequel nous recevons les données du composant parent. Les données que nous souhaitons recevoir s'appellent author que nous avons définies dans notre composant parent.

Pour avoir accès à ces données, nous devons déclarer les accessoires dans le author-detail. composant:

 Vue.component ('author-detail', {
  modèle: `
    

      
 {{owner.name}} 
      
 {{owner.email}} 
    
   ´,
  soutiens: ['owner']
})

Nous pouvons également activer la validation lors du passage d'accessoires, afin de nous assurer que les bonnes données sont transmises. Ceci est similaire à PropTypes dans React. Pour activer la validation dans l'exemple ci-dessus, modifiez notre composant comme suit:

 Vue.component ('author-detail', {
  modèle: `
    

      
 {{owner.name}} 
      
 {{owner.email}} 
    
   `,
  accessoires: {
    propriétaire: {
      type: objet,
      requis: vrai
    }
  }
})

Si nous passons au mauvais type de prop, vous verrez une erreur dans votre console qui ressemble à ce que j'ai ci-dessous:

 "[Vue warn]: Échec de la vérification du type de type de propriété: prop attendu" booléen ". , a obtenu String.
(trouvé dans le composant <>) "

Il existe un guide officiel dans Vue docs que vous pouvez utiliser pour en savoir plus sur la validation des accessoires.

Voir le stylo Vue Componets - Props de SitePoint ( @ SitePoint ) sur CodePen .

Communication d'un composant enfant à parent via un bus d'événement

Les événements sont gérés en créant des méthodes d'habillage qui sont déclenchées lorsque le l'événement a lieu. En guise de rappel, construisons notre exemple de compteur original afin qu’il augmente chaque fois que l’on clique sur un bouton.

Voici à quoi notre composant devrait ressembler:

 new Vue ({
  el: '#app',
  Les données() {
    revenir {
      compte: 0
    }
  },
  méthodes: {
    increment () {
      this.count ++
    }
  }
})

Et notre modèle:

   {{count}}
  

     + 
  

C'est, espérons-le, assez simple. Comme vous pouvez le constater, nous accrochons l’événement onClick pour déclencher une méthode d’augmentation personnalisée à chaque clic sur le bouton. La méthode augmentation incrémente alors notre propriété de données count . Développons maintenant l’exemple pour déplacer le bouton du compteur dans un composant séparé et afficher le nombre dans le parent. Nous pouvons le faire en utilisant un bus d’événements.

Les bus d’événements sont pratiques lorsque vous souhaitez communiquer d’un composant enfant à un composant parent. Ceci est contraire à la méthode de communication par défaut, qui passe de parent à enfant. Vous pouvez utiliser un bus d’événements si votre application n’est pas assez grande pour nécessiter l’utilisation de Vuex. (Vous en saurez plus à ce sujet dans «Premiers pas avec Vuex: Guide du débutant» dans cette série.)

Voici donc ce que nous voulons faire: le nombre sera déclaré dans le composant parent et transmis à un composant enfant. Ensuite, dans le composant enfant, nous voulons incrémenter la valeur count et nous assurer que la valeur est mise à jour dans le composant parent.

Le composant App ressemblera à ceci:

 new Vue ({
  el: '#app',
  Les données() {
    revenir {
      compte: 0
    }
  }

Ensuite, dans le composant enfant, nous voulons recevoir le compte via des accessoires et disposer d'une méthode pour l'incrémenter. Nous ne souhaitons pas afficher la valeur count dans le composant enfant. Nous voulons seulement faire l’incrément du composant enfant et le refléter dans le composant parent:

 Vue.component ('counter', {
  modèle: `
    

       + 
    
   »,
  accessoires: {
    valeur: {
      type: nombre,
      requis: vrai
    }
  },
  méthodes: {
    increment () {
      this.count ++
    }
  }
})

Notre modèle ressemblera à ceci:

   

    {{ compter }}
  
  

Si vous essayez d’augmenter la valeur de cette manière, cela ne fonctionnera pas. Pour que cela fonctionne, nous devons émettre un événement à partir du composant enfant, envoyer la nouvelle valeur de count et écouter cet événement dans le composant parent.

Premièrement, nous créons une nouvelle instance de Vue et réglez-le sur eventBus :

 const eventBus = new Vue ();

Nous pouvons maintenant utiliser le bus d'événements dans notre composant. Le composant enfant ressemblera à ceci:

 Vue.component ('counter', {
  accessoires: {
    compter: {
      type: nombre,
      requis: vrai
    }
  },
  méthodes: {
    increment () {
      this.count ++
      eventBus. $ emit ('count-incremented', this.count)
    }
  },
  modèle: `
  

     + 
  
   »
})

L'événement est émis chaque fois que la méthode incrémentation est appelée. Nous devons écouter l’événement dans la composante principale, puis définir le nombre sur la valeur obtenue lors de l’événement émis:

 new Vue ({
  el: '#app',
  Les données() {
    revenir {
      compte: 0
    }
  },
  créé() {
    eventBus. $ on ('count-incremented', (count) => {
      this.count = nombre
    })
  }
})

Notez que nous utilisons la méthode de cycle de vie créée par Vue pour se connecter au composant avant son montage et pour configurer le bus d'événement.

Il est bon d'utiliser un bus d'événement. votre application n'est pas complexe, mais rappelez-vous que, au fur et à mesure de l'évolution de votre application, vous devrez peut-être utiliser Vuex à la place.

Voir le stylo Vue Components - Event Bus de SitePoint ( @SitePoint ) sur CodePen .

Imbrication de contenu dans des composants utilisant des emplacements

Dans tous les exemples que nous avons vus jusqu'à présent, les composants étaient des éléments à fermeture automatique. Toutefois, afin de créer des composants pouvant être composés ensemble de manière utile, nous devons pouvoir les imbriquer les uns dans les autres, comme nous le faisons avec des éléments HTML.

Si vous essayez d’utiliser un composant avec une balise de fermeture et de contenu à l'intérieur, vous verrez que Vue avale tout cela. Tout ce qui se trouve dans les balises d’ouverture et de fermeture du composant est remplacé par la sortie rendue du composant lui-même:

   
    
 Celui-ci sera remplacé 
  

Heureusement, Les slots de Vue permettent de passer une valeur arbitraire à un composant. Cela peut être n'importe quoi, des éléments DOM d'un composant parent à un composant enfant. Voyons comment ils fonctionnent.

La partie script de nos composants se présente comme suit:

 Vue.component ('list', {
  modèle: '#list'
})

nouveau Vue ({
  el: "#app"
})

Les modèles ressembleront à ceci:

   
 Slots 
  
    
 Je suis le premier slot 
  
  
    
 Je suis le deuxième slot 
  
  

Le contenu de notre composant est rendu entre la balise d'élément . Nous pouvons également utiliser le contenu de secours, dans les cas où le parent n’en injecte aucun.

   
 Slots 
  
    
 Je suis le premier 
  
  
  

Le contenu de substitution sera rendu dans les cas où le composant parent ne contiendra aucun contenu.

Voir le stylo Vue Components - Slots de SitePoint ( @SitePoint ) sur . ] CodePen .

Conclusion

Il s'agit d'une introduction de haut niveau à l'utilisation de composants dans Vue. Nous avons examiné comment créer des composants dans Vue, comment passer d'un parent à un composant enfant via des accessoires et d'un enfant à un parent via un bus d'événement. Nous avons ensuite terminé en regardant les slots, une méthode pratique pour composer des composants de manière utile. J'espère que le didacticiel vous a été utile.

Kingsley Silas est un développeur web nigérian. Il a soif d'acquérir de nouvelles connaissances dans tous les domaines qu'il trouve intéressants.