vue 事件总线

什么是事件总线

我们之前的时候经常性是需要两个隔着老远的组件之间的通信,这个要是一层层的传递下去通信麻烦。如即时通讯,他在每一个子页面都要做成反应。

原理如下:在vue加载的时候设立一个公共的实例类型,我们的组件可以在这个全局的实例对象的原型上添加一个函数,等其他组件调用的时候再回调回来用这种方法进行通信。

在全局事件总线中,X需要满足的条件:

1.所有的组件都可以看见X

2.X能够调用$on() $off() $emit()

2. $on() $off() $emit() 存放位置

$on() $off() $emit()三个方法被挂载在Vue的原型对象上。

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

3.事件调用

// 注册事件
 this.$bus.$on('xxxx',this.demo)
// 取消事件
 this.$bus.$off('xxxx',this.demo)
// 触发事件
 this.$bus.$emit('xxxx',this.demo)

vue mitt 库

上一篇
下一篇