Comment utiliser Bus dans la communication des composants Vue

Cet article présente principalement l'utilisation spécifique de la communication des composants Bus pour Vue. Maintenant, je le partage avec vous et le donne comme référence.

Je pense que tout le monde est familier avec la communication entre composants, donc je n'entrerai pas dans les détails. Ceux qui ne sont pas familiers avec la communication entre composants devraient aller ici.

$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 d'événements basée sur la structure arborescente des composants est vraiment difficile à comprendre, et elle 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 d'état 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.

Il existe une telle définition dans la documentation officielle de Vue : communication entre composants non parent-enfant, avec très peu de contenu, comme suit :

Dans en fait, à propos de la communication entre composants non parent-enfant. La démo est toujours disponible. Elle est cachée dans les documents de migration de $dispatch et $broadcast. Les amis intéressés peuvent cliquer pour la voir. La suggestion dans la documentation est la suivante :

Le moyen le plus simple de mettre à niveau $dispatch et $broadcast est d'utiliser un centre d'événements pour permettre aux composants de communiquer librement, quelle que soit la couche dans laquelle ils se trouvent 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.
Ce middleware événementiel centralisé 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, écouter et annuler événements d'écoute respectivement :

Composants qui distribuent des événements

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

Composants d'écoute

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

Si vous avez besoin d'écouter plusieurs composants, il vous suffit de modifier le eventName of the 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);
},

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter un composant de barre de progression sensible aux événements dans Vue

Comment implémenter deux valeurs variables dans JS La méthode d'échange de

Comment implémenter des instructions personnalisées dans Vue ?

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!