【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);
      }
    }

基本实现同级数据互传

还或者可以这样写；
利用生命周期钩子来实现，​​​beforeCreate()​​生命周期函数，在未创建之前就把这个$bus(总线）给处理好。

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

但是如果弃用这个组件的话就要开始把这个占用的bus销毁掉

// 销毁组件之前解除傀儡身上的事件绑定
    beforeDestroy() {
      this.$bus.$off("hello")
    },

---

一种组件间通信的方式，适用于任意组件间通信。安装全局事件总线：

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

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

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

提供数据：​​this.$bus.$emit('xxxx',数据)​​最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。