Modèles de conception pour la communication entre les composants Vue.js

En tant que développeurs, nous souhaitons produire un code gérable et maintenable, qui est également plus facile à déboguer et à tester. Pour y parvenir, nous utilisons les meilleures pratiques appelées modèles. Les modèles sont des algorithmes et des architectures éprouvés qui nous aident à accomplir des tâches spécifiques de manière efficace et prévisible.

Dans ce didacticiel, nous examinerons les modèles de communication des composants Vue.js les plus courants, ainsi que certains pièges que nous devrions éviter. Nous savons tous que dans la vraie vie, il n’existe pas de solution unique à tous les problèmes. De même, dans le développement d’applications Vue.js, il n’existe pas de modèle universel s’appliquant à tous les scénarios de programmation. Chaque mode présente ses propres avantages et inconvénients et convient à des cas d'utilisation spécifiques.

La chose la plus importante pour les développeurs Vue.js est de comprendre tous les modèles les plus courants afin de pouvoir choisir celui qui convient à un projet donné. Il en résulte une communication correcte et efficace des composants.

Pourquoi une communication correcte entre les composants est-elle importante ?

Lorsque nous construisons une application à l'aide d'un framework basé sur des composants comme Vue.js, notre objectif est de garder les composants de l'application aussi isolés que possible. Cela les rend réutilisables, maintenables et testables. Pour rendre un composant réutilisable, nous devons le façonner sous une forme plus abstraite et découplée (ou faiblement couplée), afin de pouvoir l'ajouter à notre application ou le supprimer sans interrompre les fonctionnalités de l'application.

Cependant, nous ne pouvons pas parvenir à une isolation et une indépendance complètes entre les composants de l'application. A un moment donné, ils ont besoin de communiquer entre eux : échanger des données, changer l'état de l'application, etc. Il est donc important pour nous d’apprendre à effectuer correctement cette communication tout en gardant l’application fonctionnelle, flexible et évolutive.

Présentation de la communication des composants Vue.js

Dans Vue.js, il existe deux principaux types de communication entre les composants :

1. Communication directe parent-enfant, basée sur des relations strictes parent-enfant et enfant-parent.
2. Communication inter-composants, où un composant peut « parler » à n'importe quel autre composant, quelle que soit leur relation.

Dans les sections suivantes, nous explorerons les deux types avec des exemples appropriés.

Communication directe parent-enfant

Le modèle standard de communication entre composants pris en charge par Vue.js est le modèle parent-enfant implémenté via des accessoires et des événements personnalisés. Dans l'image ci-dessous, vous pouvez voir visuellement ce modèle en action.

Comme vous pouvez le constater, un parent ne peut communiquer qu'avec ses enfants directs, et un enfant ne peut communiquer directement qu'avec son parent. Dans ce modèle, la communication entre pairs ou entre composants n'est pas possible.

Dans les sections suivantes, nous prendrons les composants de l'image ci-dessus et les implémenterons dans une série d'exemples pratiques.

Communication parent-enfant

Supposons que le composant dont nous disposons fasse partie d'un jeu. La plupart des jeux affichent le score du jeu quelque part dans l'interface. Imaginez que nous déclarons une variable dans le composant Parent Ascore et que nous souhaitons l'afficher dans le composant Child A . Alors, comment pouvons-nous faire cela ?

Pour envoyer des données du parent à l'enfant, Vue.js utilise des accessoires. Passer des propriétés nécessite trois étapes nécessaires :

1. Enregistrez la propriété de l'enfant comme ceci : props: ["score"]
2. Utilisez les propriétés enregistrées dans le modèle enfant comme ceci : <span>分数：{{ Score }}</span>
3. Liez la propriété à la variable score 变量（在父级模板中），如下所示：<child-a :score="score"></child-a> (dans le modèle parent) comme ceci : <child-a :score="score"></child-a>

Explorons un exemple complet pour mieux comprendre ce qui se passe réellement :

// HTML part

<div id="app">
  <grand-parent/>
</div>

// JavaScript part

Vue.component('ChildB',{
  template:`
    <div id="child-b">
      <h2>Child B</h2>
      <pre class="brush:php;toolbar:false">data {{ this.$data }}

---

`, }) Vue.component('ChildA',{ template:` <div id="child-a"> <h2>Child A</h2> <pre class="brush:php;toolbar:false">data {{ this.$data }}

---

Score: {{ score }} // 2.Using