【Vue】基礎系列（二十一）——全局事件總線（GlobalEventBus）

全局事件總線（GlobalEventBus）

對于一般的全局事件總線需要一個所有成員都能看見的元件（路人x）。首先能想到的是window對象，隻要是浏覽器就有這個window.

比如在入口檔案main.js裡建立一個window對象：

然後在元件裡通過鈎子來調出資料

用加号連接配接對象會顯示object，因為連接配接的是字元串，用逗号就會單獨的把資料對象輸出。

但是再一想，我是為了讓所有的元件看見我的這個路人x，那我們的元件不就是vc嘛，vc是從何而來的？不就是​

​Vuecomponent​

​​new 出來的嘛。……隻要我在Vuecomponent的原型對象上方一個x，但是Vuecomponent是真實存在的嘛？不是的，他是Vue.extend生成的。

是以說：

vueComponent.prototype.x = {a:1,b:2}      

這個寫法本身就是錯誤的，而更加不可能的是對源碼進行一個修改。

那根據對原型的溯源，可以知道元件的來源new Vuecomponnet，而Vuecomponnet來自VUe.extend({});是以這個的來源就是如下代碼：

const Demo = Vue.extend({});
const d = new Demo();
Vue.prototype.x =      

哥哥

mounted(){
      // console.log("school:",this.x);
      this.x.$on('hello',(data)=>{
        console.log('我是school元件,收到了資料',data);
      })
      
    }      

弟弟

methods:{
      sendStudentName(){
        this.x.$emit('hello',666);
      }
    }      

基本實作同級資料互傳

new Vue({
  el: '#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this //安裝全局事件總線
    // Vue.prototype.x = this;
  },
})      

// 銷毀元件之前解除傀儡身上的事件綁定
    beforeDestroy() {
      this.$bus.$off("hello")
    },      

1. 一種元件間通信的方式，适用于任意元件間通信。
2. 安裝全局事件總線：

new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this //安裝全局事件總線，$bus就是目前應用的vm
    },
    ......
})      

1. 使用事件總線：

1. 接收資料：A元件想接收資料，則在A元件中給$bus綁定自定義事件，事件的回調留在A元件自身。

methods:{
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}      

1. 提供資料：​

   ​this.$bus.$emit('xxxx',資料)​

   ​

1. 最好在beforeDestroy鈎子中，用$off去解綁目前元件所用到的事件。