Vue-中央事件总线（bus）

---

什么是中央事件总线（bus）

通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果
也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。

我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。

如何实现：
主要使用了组件事件的三个方法：

    	//1.触发x组件的a事件: x.$emit("a事件",参数...)
		//2.给x组件绑定a事件  x.$on("a事件",监听器函数)
		//3.给x组件解绑a事件  x.$off("a事件",监听器函数)
1
2
3

//在父组件App中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//子组件box2中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//子组件box3中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

可以看到bo3接受到了box2传递的数据
但是这种方法再根节点绑定的代码比较混乱，不利于维护，所以我们需要创建一个组件这个组件，所有组件都能访问。

创建中央事件总线

方法一 全局事件总线

1.在main.js文件中定义
Vue.prototype.$bus=new Vue({
	data:{
		arr:[]  //用来保存事件名
	},
	methods:{
	//绑定事件
		on(eventname,callback){
		//判断事件名是否重复
			if(this.arr.includes(eventname)){
				throw "eventname events already regist!!"
			}else{
				this.arr.push(eventname)
				this.$on(eventname,callback)
			}		
		},
		//触发事件，传递数据
		emit(eventname,...arg){
			this.$emit(eventname,...arg)
		},
		解绑
		off(eventname,callback){
			this.$off(eventname,callback)
		}
	}
})
2.使用方法
this.$bus.emit('定义名称',值) //触发事件 
this.$bus.on('定义名称' val=>{}) //绑定事件 
this.$bus.off('定义名称') //解绑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

方法二、单独创建bus.js文件

1.在main.js的同级建一个bus.js,
2.在main.js引入
import bus from “./bus.js”
绑定到原型上 Vue.prototype.$bus = bus;