Le bus d'événements central de Vue permet une communication mutuelle entre tous les composants

Monter dans le fichier main.js

Remarque : La méthode d'implémentation du bus d'événements central peut également être implémentée de cette manière

1. Créez directement un nouveau fichier js, créez et exportez une instance vue dans le fichier.
2. Introduisez ce bus.js dans les deux composants qui doivent communiquer
3. Dans le composant qui transfère les données, le nom de l'événement et les données à transférer sont envoyés via la méthode d'instance vue $emit. (envoyer le composant de données)
4. Le composant à qui les données ont été transmises écoute l'événement et reçoit les données via la méthode d'instance vue $on.

Cette méthode est décrite dans le résumé des méthodes de communication entre les composants Vue dans cet article, et il contient plusieurs autres méthodes de communication.

Cet article parle principalement du bus événementiel central de vue, et la façon de choisir estCréez directement une instance de vue et montez-la sur le prototype de vue (Vue.prototype), afin que nous puissions effectuer des appels de méthode dans n'importe quel composant vue. Je pense qu'il est plus simple et plus direct de mettre en œuvre de cette façon. Le code dans le fichier main.js est le suivant :

// main.js
Vue.prototype.$bus = new Vue();

Initier et écouter des événements dans les composants correspondants

// 发起事件的组件 this.$bus.$on
// 在对应代码处发起事件
// fn   为发起的事件名称，会被$bus.$on监听，可以自己定义名称（发起与监听的名称要一致）
// data 为需要传递的数据，能够在$bus.$on处获取
const data = 'abc'
this.$bus.$emit('fn', data)

// 响应事件的组件 this.$bus.$emit
// 先在mounted中进行注册监听
//（注意：注册监听的组件中，在组件销毁前记得通过$off注销对中央事件中线的监听）
// fn  为监听的事件名称，会由$emit发起，可以自己定义名称（发起与监听的名称要一致）
// foo 为响应事件的具体方法
methods: {
    
    
	foo(val) {
    
    
		console.log(val) // abc
	}
}
mounted() {
    
    
	this.$bus.$on('fn', this.foo)
}
beforeDestroy() {
    
    
  	this.$bus.$off("fn");
},

Notes (Central Event Bus ne prend pas effet)

Étant donné que le bus d'événements central est souvent utilisé dans des composants inter-niveaux, des amis se retrouvent parfois dans une situation dans laquelle l'événement est déclenché, mais l'événement d'écoute ne répond pas.
La raison possible de cette situation est la suivante : lorsque le composant qui initie l'événement initie l'événement, le composant qui écoute l'événement n'a pas été monté ou n'a pas encore écouté l'événement. (En termes simples, l'événement d'écoute (on) doit avoir lieu avant que l'événement (emit) soit initié.）