前言
vue通信手段有很多种，props/emit、vuex 、provide/inject 、attrs、listeners 等。还有一种通信方式，event bus 两个不相关的组件之间的通信方式，一般用于兄弟组件之间的通讯方式。Vuex也能实现兄弟组件之间的传值，定义一个公共变量也是可以的，但是相对来说比较好的实现方式就是 eventBus 。
使用
1.首先我们创建一个 bus.js 文件，里面的内容如下：
// event-bus.js
import Vue from 'vue';
export default new Vue();
或者：可以直接在项目中的 main.js 初始化 EventBus
// main.js
Vue.prototype.$EventBus = new Vue()
2.在需要使用 eventBus 的组件中引入上面创建的 bus.js 文件
import EventBus from "../bus.js";
3.发布Bus消息的组件
methods: {
getBusToo() {
EventBus.$emit("getTarget", this.sendText);
//或者 main.js 引用时
this.$EventBus.$emit("getTarget", this.sendText);
},
},
4.接收Bus消息的组件
mounted() {
EventBus.$on("getTarget", (myMsg) => {
this.receive = myMsg;
});
//或者 main.js 引用时
this.$EventBus.$on("getTarget", (myMsg) => {
this.receive = myMsg;
});
},
5.vue页面销毁时，同时移除EventBus事件监听。
mounted() {
EventBus.$on("getTarget", (myMsg) => {
this.receive = myMsg;
});
},
//移除EventBus事件监听
destroyed() {
//使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。
//或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数
EventBus.$off("getTarget");
//或者 main.js 引用时
this.$EventBus.$off("getTarget", this.sendText);
},
另外：也可以将EventBus定义全局EventBus，如果有兴趣可以再试一下。
参考文章：Vue兄弟组件之间通信 eventBus 、Vue事件总线（EventBus）使用详细介绍
代码地址：码云 vue-question 组件通讯 - event bus
