1. 初始化事件总线

• 事件总线就是一个轻量级的vue实例

// EventBus.js
export default new Vue()

2. 使用

主模块引入挂载搭配vue实例上，这样避免每个vue文件都导入一次

// main.js
import bus from "./common/EventBus";
Vue.prototype.$bus = bus
new Vue({
  components: {
    A,
    B
  },
  render () {
    return (
      <div>
        <A></A>
        <B></B>
      </div>

    )
  }
}).$mount("#app");

// A.vue
<template>
  <div id="A">msgA: <button @click="this.trigger">点我</button></div>
</template>
<script>

export default {
  data () {
    return {
      msgA: '我是A组件的msgA'
    }
  },
  methods: {
    trigger () {
      // 这里发射事件
      // this.$bus.$emit('事件名', string/object)
      this.$bus.$emit('信号', this.msgA)
    }
  },
}
</script>

// B.vue
<template>
  <div id="B">msgB: {{ msgB }}</div>
</template>
<script>

export default {
  created () {
    // 监听事件
    // this.$bus.$on('事件名', callback)
    this.$bus.$on('信号', msg => {
      this.msgB = msg
    })
  },
  data () {
    return {
      msgB: ''
    }
  }
}
</script>

3. 常见方法

1. EventBus.$once('事件名称',callBack(payload1...)): 在一个组件中某事件如果只监听一次的话，可以使用 
2. EventBus.$off('事件名', callback): 只移除这个回调的监听器。
3. EventBus.$off('事件名'): 移除该事件所有的监听器。
4. EventBus.$off(): 移除所有的事件监听器，注意不需要添加任何参数。

参考

参考