vue 任意组件间通信-全局事件总线（GlobalEventBus）

全局事件总线（GlobalEventBus）

一种组件间通信的方式，适用于任意组件间通信

安装全局事件总线

main.js入口文件配置

  new Vue({
  	......
  	beforeCreate() {
  		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
  	},
      ......
  }) 

使用事件总线

1、接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

     methods(){
       getName(data){......}
     }
     ......
     mounted() {
       this.$bus.$on('eventName',this.getName)
     }

或者使用箭头函数回调,不用在methods中另外写回调方法

 mounted() {
        this.$bus.$on('eventName',(params)=>{
            //逻辑
          })
      }

2、提供数据,触发事件：

this.$bus.$emit('eventName',数据)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

使用解绑单个自定义事件的方式，不能使用$off()这样解绑全部自定义事件了，把其它组件的都解绑了。

  beforeDestroy() {
	 this.$bus.$off('enentName')
	}

为什么要解绑呢？就放着不行吗？ 因为$bus绑定了很多组件的自定义事件，如果不解绑，那其实这个是多余的事件，不合理了