El bus de eventos central de Vue permite la comunicación mutua entre cualquier componente

Montar en el archivo main.js

Nota: El método de implementación del bus de eventos central también se puede implementar de esta manera.

1. Cree un nuevo archivo js directamente, cree y exporte una instancia de vue en el archivo.
2. Introduzca este bus.js en los dos componentes que necesitan comunicarse.
3. En el componente que transfiere datos, el nombre del evento y los datos a transferir se envían a través del método de instancia vue $emit. (enviar componente de datos)
4. El componente al que se le pasan los datos escucha el evento y recibe los datos a través del método de instancia vue $on.

Este método se describe en el resumen de métodos de comunicación entre componentes de Vue en este artículo, y contiene varios otros métodos de comunicación.

Este artículo habla principalmente sobre el bus de eventos central de vue, y la forma de elegir esCree una instancia de vue directamente y móntela en el prototipo de vue (Vue.prototype), para que podamos realizar llamadas a métodos en cualquier componente de vue. Creo que es más sencillo y directo de implementar de esta manera. El código en el archivo main.js es el siguiente:

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

Iniciar y escuchar eventos en los componentes correspondientes.

// 发起事件的组件 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");
},

Notas (Central Event Bus no tiene efecto)

Debido a que el bus de eventos central se usa a menudo en componentes de niveles cruzados, a veces los amigos encontrarán la situación en la que se inicia el evento, pero el evento de escucha no responde.
La posible razón de esta situación es: cuando el componente que inicia el evento inicia el evento, el componente de monitoreo de eventos no se ha montado o aún no ha escuchado el evento. (En pocas palabras, el evento de escucha (activado) debe realizarse antes de que se inicie el evento (emitir).）