vue事件总线EventBus的使用

前言

在父子组件的通信中，我们会使用props向子组件传递数据，而子组件会通过$emit自定义事件向父组件发送数据。那么在多层组件场景下，两个组件之间没有直接的引入关联，该如何通信呢？

常用的方案有两种，一种使用vuex状态管理，另一种那个便是使用EventBus来解决通信问题。

使用方法

1. 定义

在main.js中定义eventbus挂载到vue实例原型上。

// main.js
Vue.prototype.$EventBus = new Vue()

2. 发送事件

在A页面触发事件，第一个参数为事件名称，后面是需要传递的数据。
this.$EventBus.$emit(事件名, 参数一，参数二, ...)

// A.vue
<script> 
export default {
  methods: {
    sendData() {
       this.$EventBus.$emit('changeData', params)
    }
  }
}; 
</script>

3. 接收事件

在B页面的mounted钩子里监听A页面的事件获取数据。
this.$EventBus.$on(事件名, 回调函数)

// B.vue
<script> 
export default {
  mounted() {
    this.$EventBus.$on("changeData", (params) => {
      console.log(params)
    });
  }
};
</script>

4.移除事件

多次进入B页面，由于上一次的事件监听并没有被移除，所以便会导致监听触发的次数增多。因此需要在组件销毁前移除事件监听。

// B.vue
<script> 
export default {
  mounted() {
    this.$EventBus.$on("changeData", (params) => {
      console.log(params)
    });
  }
  beforeDestroy(){
    //移除监听事件"changeData"，this.$EventBus.$off() 会移除所有的事件监听
    this.$EventBus.$off("changeData")
  }
};