Vue组件间通信--EventBus(事件总线)/7

EventBus

一种组件间通信的方式，适用于任意组件间通信。

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个地方注册事件，有另外一个或多个地方订阅事件。主要适用于小型项目

注册EventBus 

在main.js文件中

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

使用事件总线

接收数据：

A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

 提供数据：

this.$bus.$emit('xxxx',数据)

例: 

在main.js中挂载

在erzi这个组件中订阅

 

在xiongdi这个组件中发布

点击事件前

点击之后

总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次

• 解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听
• 语法：this.$bus.$off(要移除监听的事件名) 

 beforeDestroy(){
    //移除监听事件"aMsg"
  	this.$bus.$off("addProduct")
  }