vue 全局事件总线详解 $bus-任意组件间通信

全局事件总线（GlobalEventBus）

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

1.安装全局事件总线

main.js入口文件配置

  new Vue({
  	beforeCreate() {
  		Vue.prototype.$bus = this 
        //安装全局事件总线，
        //在开发中习惯取名为：$bus，可以自由命名
  	},
  }).$mount('#app') 

2.使用事件总线

以 B 组件给 A 组件传值为例；（B —> A）

2.1.接收数据：

A组件想接收数据，则在A组件中给$bus绑定自定义事件；

事件的回调在A组件自身。

     methods(){
        //事件回调
       getName(data){
            console.log(date)
       }
     }
     
     mounted() {
        //绑定事件
       this.$bus.$on('eventName',this.getName)
     }

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

      mounted() {
        this.$bus.$on('getName',(data)=>{
           console.log(data)
        })
      }

2.2.提供数据,触发事件：

在 B组件 中触发事件，并传递数据

this.$bus.$emit('getName',data)

              //(‘A组件中用$on绑定的事件名’，要传递的数据)

2.3.用$off去解绑当前组件所用到的事件

把事件用完之后最好在beforeDestroy钩子中，解绑事件；

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

注意：解绑单个自定义事件时，不能"$off()"，必须写事件名，否则会把其它全部组件的都解绑了。