Vue全局事件总线

今天写项目的时候遇到一个需求，就是A组件提交表单后，需要刷新B组件的数据，但是A、B组件并没有什么关系，甚至兄弟组件都不是。

我的操作居然是将A放到B的父组件中，这样就是兄弟组件，然后在父组件给A绑定自定义事件并且给B绑定ref，然后A组件中触发自定义事件，然后在父组件的自定义回调中用$ref调用B中的方法，达到通信。最后不知道哪里出来问题，需求并没有实现。然后突然想到了全局事件总线，立马就实现了，记录一下方法。

1.安装全局事件总线（在main.js文件中）

new Vue({
  beforeCreate () { 
    // 挂载全局事件总线对象
    Vue.prototype.$bus = this
    },
  render: h => h(App)
}).$mount('#app');

2.接收数据—在需要接收数据的组件中书写，并且定义回调函数handleData（然后记得要解绑事件，操作见第四步）

methods(){
    //回调函数
    handleData(data){
        console.log('接收到了数据data' + data)
    }
},

mounted(){
    //给$bus绑定事件,第一个参数是事件名，第二个是触发后的回调
    this.$bus.$on('sendData',this.handleData)
}

3.发送数据—在提供数据的组件中书写，触发$bus绑定的事件sendData

//在需要通信时书写即可，第二个参数data为传过去的数据
this.$bus.$emit('sendData',data)

4.解绑事件—在接收组件销毁前记得解绑注册的事件（在beforeDestroy生命周期钩子中进行）

beforeDestroy() {
    this.$bus.off("sendData")
},