全局事件总线,实现组件之间的通信

365 阅读1分钟

最近学习了全局事件总线,这是一种在组件间的通信方式,他通过在vue实例上面挂载一个$bus,来实现组件之间的通信

创建

首先需要创建$bus,在main.js创建Vue实例时,在VUE的原型对象上放一个$bus
Vue.protoptype.$bus=this   //this指的是Vue所创建的这个实例
//这样就可以在vue实例中访问到$bus了

绑定事件

组件之间想要通信,需要信息的那个组件先创建一个触发的事件

this.$bus.$on('事件名',回调函数) 
// this指vue组件实例对象,在组件实例对象中可以访问到vue原型中的$bus属性

数据传输

传输数据的组件使用

this.$bus.$emit('事件名',传输的信息)

这样另一个组件就会收到我们所传输的信息,并执行回调

这样我们便通过全局事件总线实现了组件之间的通信,这种方式可以任意组件之间通信