O barramento central de eventos do Vue permite a comunicação mútua entre quaisquer componentes

Monte no arquivo main.js

Nota: O método de implementação do barramento de eventos central também pode ser implementado desta forma

1. Crie um novo arquivo js diretamente, crie e exporte uma instância vue no arquivo.
2. Apresente este bus.js nos dois componentes que precisam se comunicar
3. No componente que transfere dados, o nome do evento e os dados a serem transferidos são enviados através do método de instância vue $emit. (enviar componente de dados)
4. O componente que recebe os dados escuta o evento e recebe os dados por meio do método de instância vue $on.

Este método é descrito no resumo dos métodos de comunicação entre os componentes Vue neste artigo e contém vários outros métodos de comunicação.

Este artigo fala principalmente sobre o barramento central de eventos do vue, e a forma de escolher éCrie uma instância vue diretamente e monte-a no protótipo do vue (Vue.prototype), para que possamos fazer chamadas de método em qualquer componente vue. Acho que é mais simples e direto implementar dessa forma. O código no arquivo main.js é o seguinte:

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

Iniciar e ouvir eventos nos componentes correspondentes

// 发起事件的组件 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 (o Central Event Bus não entra em vigor)

Como o barramento de eventos central é frequentemente usado em componentes de nível cruzado, às vezes os amigos encontrarão a situação em que o evento é iniciado, mas o evento de escuta não responde.
A possível razão para esta situação é: quando o componente que inicia o evento inicia o evento, o componente que escuta o evento não foi montado ou ainda não ouviu o evento. (Simplificando, o evento de escuta (on) deve ocorrer antes do evento (emissão) ser iniciado）