Vue - 组件通信之 event bus

前言

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