Vue全局事件总线、消息订阅与发布、非父子组件传值

Vue与VueComponent的关系图

Vue全局事件总线

• 全局事件总线是一种组件间通信的方式，适用于任意组件间通信。
• 相当于给每个组件做个代理，作为数据通信的中转站。
• 其本质是Vue的实例对象，通过$emit、$on、$off发布、监听、关闭事件。
• 所以就需要每个子组件都能访问的到（每个子组件实例上都要有$bus），因此一般放在Vue的原型对象上

第一种常见的定义方法

// main.js
import Vue from 'vue'
import App from './App.vue'

// 将$bus挂载在Vue原型上，当然也可挂载到Window上，不太建议
Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App)
}).$mount('#app')

这样就可以在组件中使用this.$bus.$emit发送事件，需要接受数据的组件用this.$bus.$on监听，当然不要忘了在beforeDestory钩子函数中，用this.$bus.$off解绑当前事件。

$off解绑单个事件this.$bus.$off('aaa')，多个可以用数组this.$bus.$off(['aaa', 'bbb'])，详情查看官方文档

上面这种方法比较常见，但是有一个小问题，就是这里的Vue被new了两次，实际上是可以优化的。

优化后的代码如下

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
  beforeCreate () {
    // 安装全局事件总线，$bus就是当前应用的vm
    Vue.prototype.$bus = this
  }
}).$mount('#app')

利用beforeCreate钩子函数挂载$bus，这是比较好的写法

消息订阅与发布（PubSub）

• 一种组件间的通讯方式，适用于任意组件通讯（与上面的事件总线类似，了解即可）

使用步骤

1. 安装PubSub: npm i pubsub-js
2. 引入：import PubSub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息

methods: {
  demo(msg, data) { ...... }
}
......
mounted() {
  this.pid = PubSub.subscribe('xxx', this.demo) // 订阅消息
}

4. 提供数据：PubSub.pubilsh('xxx', data)
5. 在beforeDestory钩子函数中用PubSub.unsubscribe('xxx')取消订阅