Vue学习计划-Vue2--VueCLi（五）全局事件总线、消息订阅与发布（pubsub）

抛出问题:我们多级组件，或者任意不想关的子组件如何传递数据呢？

1. 全局事件总线（$bus）

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

2. 全局事件总线示意图：
   

3. 安装全局事件总线：

new Vue({
    ....
    beforeCreate(){
        Vue.prototype.$bus = this // 安装全局事件总线，$bus就相当于vm
    }
})

4. 使用事件总线：
   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

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

   2. 提供数据： this.$bus.$emit('xxx', 数据)
5. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

示例：我们继续使用Vue学习计划-Vue2–VueCLi（四）组件传值和自定义事件示例中的4个组件：父组件APP.vue，子组件SelectInput.vue、SelectList .vue、SelectMulDel.vue，我们这里只更拿App.vue和SelectInput.vue为例：
1. 在main.js中安装全局事件总线：

2. 子组件SelectInput.vue内提供数据：

3. 父组件App.vue内给$bus绑定事件，并在beforeDestroy中销毁绑定事件：

2. 消息订阅与发布（pubsub）

1. 一种组件间通信的方式，适用于任意组件间通信
2. 使用步骤：
   1. 安装pubsub: npm i pubsub-js或者yarn add pubsub-js或者cnpm i pubsub-js
   2. 引入: import PubSub from 'pubsub-js'
   3. 接收数据： A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

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

   4. 提供数据： PubSub.publish('xxx', 数据)
   5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

示例：拿$bus的App.vue和SelectInput.vue为：

1. 安装依赖；不需要main.js内写任何内容，但是需要在用到订阅发布的依赖组件内手动引入

2. 修改SelectInput.vue组件：
   

3. 修改App.vue组件：
   

4. 总结一下：其实不管是全局事件总线还是消息订阅与发布，我们都可以看出来，其实本质都是一样的：将自定义事件和数据存到一个公共的空间内，谁用谁去调。