Comment utiliser le bus de communication des composants Vue

Cette fois, je vais vous expliquer comment utiliser le bus de communication du composant Vue. Quelles sont les précautions lors de l'utilisation du bus de communication du composant Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

$dispatch et $broadcast sont obsolètes dans vue2.0. L'explication donnée dans la documentation officielle est la suivante :

Parce que la méthode de flux event basée sur la structure arborescente des composants est vraiment difficile à comprendre, et deviendra de plus en plus fragile à mesure que la structure des composants se développe. Cette méthode événementielle n’est vraiment pas bonne et nous ne voulons pas causer trop de problèmes aux développeurs à l’avenir. Et $dispatch et $broadcast ne résolvent pas le problème de communication entre les composants frères.

La solution de gestion des statuts officiellement recommandée est Vuex. Cependant, si le projet n'est pas très volumineux et que la gestion des statuts n'est pas très compliquée, utiliser Vuex vous semblera excessif. Bien sûr, cela dépend également de vos propres besoins et n'est qu'une suggestion.

En fait, il existe toujours une démo sur cette communication de composant non parent-enfant. Elle est cachée dans les documents de migration de $dispatch et les amis intéressés peuvent cliquer pour la voir. La suggestion dans le document est :

Le moyen le plus simple de mettre à niveau $dispatch et $broadcast consiste à utiliser un hub d'événements pour permettre aux composants de communiquer librement, quel que soit leur emplacement dans l'arborescence des composants. Étant donné que les instances Vue implémentent une interface de répartition d'événements , vous pouvez y parvenir en instanciant une instance Vue vide. Cet événement centralisé
middleware est Bus. J'ai l'habitude de définir le bus globalement :

app.js

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

Ensuite, dans le composant, vous pouvez utiliser $emit, $on, $off pour distribuer, surveiller et annuler respectivement les événements d'écoute :

Composants qui distribuent des événements

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是传递的参数
 //...
 }
}

Volet écoute

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
  //todo something
 })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('todoSth');
},

Si vous devez surveiller plusieurs composants, il vous suffit de changer le nom de l'événement du bus :

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

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 payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment changer les boutons fléchés avec le plug-in swiper

Comment implémenter le menu de la barre latérale avec vue +swiper

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!