Vue-事件总线

357 阅读1分钟

事件总线形式

事件总线经常是在Vue的原型上加上一个属性,如bus,且赋值它一个新的Vue实例:Vue.prototype.bus = new Vue()

事件总线使用及原理

这个新的实例在任意的Vue实例中,都可以通过this.bus访问到,vue一些原型链上的方法也可以使用,所以在一个组件中使用emit,另一个组件注册使用emit,另一个组件注册使用on,能完成跨组件的交互,交互方式是事件形式,因此叫事件总线。

事件总线疑问

可以把它的值渲染到模板中吗?比如模板中使用{{bus.name}}?

如果只是静态的是不会报错的,但如果试图改变,会报错。报错信息 [Vue warn]:避免在运行时向Vue实例或其根$data添加反应性属性-在data选项中预先声明它。

和Vuex区别

由于事件总线采用触发和侦听的方式进行,又针对数据是否需要改变这个问题上侦听多方无法统一,所以在用途更多的在于发生了什么事件,来间接改变数据,而不是直接改变Vue之间共享的数据,因此,有了Vuex作为补充。

为什么不用bus的数据作为共享数据呢?