Explication détaillée de la communication entre les composants frères et sœurs eventBus

Cette fois, je vais vous apporter une explication détaillée de la communication des composants frères eventBus. Quelles sont les précautions pour la communication des composants frères eventBus. Ce qui suit est un cas pratique, jetons un coup d'œil.

Dans vue1.0, la communication entre les composants est principalement réalisée via le téléchargement de vm.$dispatch le long de la chaîne parent vers et l'utilisation de vm.$broadcast pour diffuser vers le bas. Cependant, dans vue2.0, cet usage a été aboli.

Après l'ajout de vuex, la communication entre les composants sera plus claire. Pour les projets de taille moyenne et grande, il est judicieux de planifier l'utilisation de vuex dès le début.

Cependant, dans certains petits projets, ou pour des personnes comme moi qui ont découvert que $.broadcast et $dispatch ne peuvent pas être utilisés dans vue2.0 seulement à mi-chemin de l'écriture, une solution plus pratique est nécessaire. Ensuite, le rôle d’eventBus se reflète.

La principale approche pratique consiste à introduire une nouvelle instance de vue parmi les composants frères qui souhaitent communiquer entre eux, puis à réaliser la communication et le transfert de paramètres en appelant respectivement l' événement déclenchement et surveillance de cette instance.

Voici un exemple simple :

Par exemple, nous avons ici trois composants, main.vue, click.vue et show.vue. click et show sont des composants frères sous le composant parent main, et click parcourt plusieurs éléments de liste dans le composant parent via v-for. Ce qui doit être implémenté ici, c'est qu'une fois l'événement click déclenché dans le composant click, le composant show consolera sur quel élément DOM a été cliqué.

Tout d’abord, nous ajoutons un événement click au composant click

<p class="click" @click.stop.prevent="doClick($event)"></p>

Pour implémenter la communication avec le composant show dans la méthode doClick(), nous devons créer un nouveau fichier js pour créer notre eventBus. Nous le nommons bus.js

import Vue from 'vue'; 
export default new Vue();

. De cette façon, nous créons une nouvelle instance de vue. Ensuite, nous l'importons dans le composant click et montrons le composant.

import Bus from 'common/js/bus.js';

Ensuite, nous déclenchons un événement dans la méthode doClick :

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
}

Ici, chaque fois que nous cliquons dans le composant click, l'événement nommé « getTarget » sera déclenché dans le bus, et le event.target de l'événement click sera transmis le long de l'événement.

Ensuite, nous devons appeler bus dans le hook créé() dans le composant show pour écouter cet événement et recevoir les paramètres :

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   }

De cette façon, dans chaque événement click du composant click, le event.target sera transmis au show et consolé.

L'utilisation d'eventBus est donc toujours très pratique, mais s'il s'agit d'un projet moyen ou grand et que la communication est plus compliquée, il est recommandé d'utiliser directement vuex.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Problèmes d'affectation des tableaux et objets vue

Ajout et suppression d'informations utilisateur sur les opérations Bootstrap et Vue

Comment Yuansheng JS implémente-t-il le téléchargement de fichiers asynchrone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!