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綁定了很多組件的自定義事件，如果不解綁，那其實這個是多余的事件，不合理了