Vue全局事件总线

vue全局事件总线

1.什么是全局事件总线？

全局事件总线是一种组件之间通信的方式，适用于任意组件间的通信。

2.安装全局事件总线

new Vue({
   ......
   beforeCreate(){//生命钩子
     Vue.prototype.$bus=this// 安装全局事件总线$bus,this为当前所new的Vue实例
   }
   ......
})

3.使用全局事件总线

（1）接收数据：若某个组件想接收数据，就在该组件上给$bus绑定一个自定义事件，事件的回调留在该组件自身。

methods(){
  test(data){
  //当被调用时data即为传过来的数据
  }
}，
......
mounted(){
   this.$bus.$on('事件名',this.test)
}

(2)提供数据：在另一个组件中将自定义事件触发，并将数据作为参数传过去，即可在接收数据的组件的事件回调中获得数据，这样便实现了组件之间的通信

this.$bus.$emit('事件名',data)