Explication détaillée de l'implémentation eventBus de la communication des composants frères dans vue2.0s

Cet article présente principalement l'exemple de code d'eventBus dans vue2.0s pour implémenter la communication entre les composants frères. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Dans vue1.0, la communication entre les composants est principalement réalisée via vm.$dispatch se propageant vers le haut le long de la chaîne parent et vm.$broadcast 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 moyens et grands, c'est un choix judicieux de planifier l'utilisation de vuex dès le début.

Cependant, dans certains petits projets, ou pour des gens comme moi qui découvrent 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 à implémenter la communication et le transfert de paramètres en appelant respectivement le déclenchement et la surveillance d'événements de cette instance. .

Voici un exemple simple :

Par exemple, nous avons trois composants ici, 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>

Nous voulons implémenter le contrôle dans le doClick () Pour communiquer avec le composant show, 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, on déclenche un événement dans la méthode doClick :

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

Ici, chaque 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 de clic 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 de moyenne à grande taille et que la communication est plus compliquée, il est recommandé d'utiliser directement vuex.

Recommandations associées :

Méthode de communication des composants Vue Brother

Partage d'exemples de communication avec les composants Vue.js

Explication détaillée de la communication des composants non parent-enfant du bus d'événements dans vue

Analyse détaillée de plusieurs postures dans la communication des composants Vue.js

Plongée approfondie dans les composants Vue.js et la communication entre les composants

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!