vue 非父子传递EventBus事件总线模式开发

EventBus 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。

EventBus

想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。

而 EventBus就是用来解决这个问题的：在需要获取  data  的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。

我们不难发现 EventBus 的主要功能就两个： 监听和广播，当然还有去掉监听器。

而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能：

let eventBus = new Vue()
// 监听
eventBus.$on('eventName', (data) => {
 console.log('Trigger this event and receive ' + data)
})

// 广播
eventBus.$emit('eventName', data)

// 去掉监听
eventBus.$off('eventName')

有没有感觉很优雅呢？其实本质上这里就借用了 Vue 的事件监听功能来完成 EventBus 的。

依赖注入

优雅是优雅，但是这明显是个全局变量呀，难道我们要将它放在入口 main.js 里面初始化么？还是放在 Vue.prototype 里直接用 this.eventBus 来使用呢？No no no，Vue 给我们提供了一个更简洁的写法：依赖注入。

在顶层组件的 data 里初始化eventBus，并使用 provide 对外暴露这个 eventBus。

import Vue from "vue";
export default {
  name: "App",
  components: {
    GrandParent  
  },
  data() {
    return {
      eventBus: new Vue()
    };
  },
  provide() {
    return {
      eventBus: this.eventBus    
     };
  },
  methods: {
    setRandomValue() {
      this.eventBus.$emit("update:msg", Math.random() * 100);
    }
  }};

然后在需要监听的组件里用 inject 注入这个依赖，并在 created 里添加事件监听。

export default {
  inject: ["eventBus"],
  data() {
    return {
      msg: ""
    };
  },
  created() {
    this.eventBus.$on("update:msg", msg => {
      this.msg = msg;
    });
  }};

最终的结果是在 App 里修改 msg，添加监听事件的子组件都会获取最新的 msg，并用其再更新自己的数据或者状态。

我们也可以在main.js 初始化的时候直接绑定

new Vue({
  router,
  store,
  render: h => h(App),
  data: {
    eventBus: new Vue()
  }
}).$mount('#app')

但是我们用事件总线来开发app或者公众号的时候会产生失效的bug慎用！慎用