vue中如何使用$bus事件总线 $bus的基本用法

vue中如何使用$bus事件总线，$bus的基本用法以及常见问题。

vue中的事件总线：$bus

原理：$bus就是vue原型上添加的一个vue实例，用于存储、监听以及触发事件

Vue.prototype.$bus = new Vue();

解决的问题：无关组件之间的交互问题（也可以使用vuex）

使用方法

创建事件总线

Vue.prototype.$bus = new Vue();

触发事件并传参

this.$bus.$emit(event, this.event);// 触发事件（事件名，参数）

this.$bus.$emit(event);// 触发event事件

监听事件event并收参data

this.$bus.$on(event, (data) => {
	console.log('event', data)
);

删除事件

this.$bus.$off(event)

重点注意：如果一个事件已存在，那么再为其赋值是不会被覆盖的，所以会使用如下写法：

// 赋值前先将其值删除
this.$bus.$off(event).$on(event, () => {
	this.show = true;
})