Vue基础系列（二十一）——全局事件总线（GlobalEventBus）

Posted 2022-05-18 勇敢*牛牛

全局事件总线（GlobalEventBus）

对于一般的全局事件总线需要一个所有成员都能看见的组件（路人x）。首先能想到的是window对象，只要是浏览器就有这个window.
比如在入口文件main.js里创建一个window对象：

然后在组件里通过钩子来调出数据

用加号连接对象会显示object，因为连接的是字符串，用逗号就会单独的把数据对象输出。

但是再一想，我是为了让所有的组件看见我的这个路人x，那我们的组件不就是vc嘛，vc是从何而来的？不就是Vuecomponentnew 出来的嘛。……只要我在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 = d

哥哥

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")
		,

---

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

2. 安装全局事件总线：

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

3. 使用事件总线：

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

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

   2. 提供数据：this.$bus.$emit('xxxx',数据)

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