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）
- 一种组件间的通讯方式，适用于任意组件通讯（与上面的事件总线类似，了解即可）
使用步骤
- 安装PubSub:
npm i pubsub-js - 引入：
import PubSub from 'pubsub-js' - 接收数据：A组件想接收数据，则在A组件中订阅消息
methods: {
demo(msg, data) { ...... }
}
......
mounted() {
this.pid = PubSub.subscribe('xxx', this.demo) // 订阅消息
}
- 提供数据：
PubSub.pubilsh('xxx', data) - 在
beforeDestory钩子函数中用PubSub.unsubscribe('xxx')取消订阅