组件通信之全局事件总线 & 消息订阅发布

全局事件总线

介绍

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

在使用全局事件总线之前需要一些知识准备

所有组件实例的原型对象的原型对象就是 Vue 的原型对象，即VueComponent.prototype.__proto__ === Vue.prototype

1. 所有组件对象都能访问 Vue 原型对象上的属性和方法
2. Vue.prototype.x = new Vue()，所有的组件对象都能看到x 这个属性

正是由于所有组件都可以访问Vue原型对象上的属性，如果我们将想要交户的属性或方法定义在Vue原型对象

上，就可以实现任意组件之间的通信

使用之前需要了解的Vue 原型对象上包含事件处理的方法

• $on(eventName, listener): 绑定自定义事件监听
• $emit(eventName, data): 分发自定义事件
• $off(eventName): 解绑自定义事件监听
• $once(eventName, listener) : 绑定事件监听, 但只能处理一次

使用

定义全局事件总线

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

使用

//接收数据方：$on
methods:{
  demo(data){......}
},
......
mounted() {
  //this.$bus.$on('xxxx',this.demo)
   // 或直接使用回调函数，切记是箭头函数，不然this不是当前组件
    this.$bus.$on('xxxx',()=>{})

},
beforeDestroy() {
     this.$bus.$off('hello')
}

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件，否则总线的负担会很重

//发送数据方：$emit
this.$bus.$emit('xxxx',数据)

消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信。可以形象地理解为收音机切换到某个指定频率才能接收该频率的消息

使用步骤

1. 安装pubsub：npm i pubsub-js

2. 引入: import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

//接收数据方
methods:{
  demo(data){......}
},
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
},
//销毁
beforeDestroy() {
    pubsub.unsubscribe(this.pubId)
},

//提供数据方
pubsub.publish('xxx',数据)