抛出问题:我们多级组件,或者任意不想关的子组件如何传递数据呢?
1. 全局事件总线($bus)
- 
一种组件间通信的方式,适用于任意组件间通信 
- 
全局事件总线示意图:  
- 
安装全局事件总线: 
new Vue({
    ....
    beforeCreate(){
        Vue.prototype.$bus = this // 安装全局事件总线,$bus就相当于vm
    }
})
- 使用事件总线:
- 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
 methods: { demo(data){.....} }, mounted(){ this.$bus.$on('xxx', this.demo) }- 提供数据: this.$bus.$emit('xxx', 数据)
 
- 接收数据:A组件想接收数据,则在A组件中给
- 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
示例:我们继续使用Vue学习计划-Vue2--VueCLi(四)组件传值和自定义事件示例中的4个组件:父组件APP.vue,子组件SelectInput.vue、SelectList .vue、SelectMulDel.vue,我们这里只更拿App.vue和SelectInput.vue为例:
1. 在main.js中安装全局事件总线:
 2. 子组件
2. 子组件SelectInput.vue内提供数据:
 3. 父组件
3. 父组件App.vue内给$bus绑定事件,并在beforeDestroy中销毁绑定事件:

2. 消息订阅与发布(pubsub)
- 一种组件间通信的方式,适用于任意组件间通信
- 使用步骤:
- 安装pubsub:npm i pubsub-js或者yarn add pubsub-js或者cnpm i pubsub-js
- 引入: import PubSub from 'pubsub-js'
- 接收数据: A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
 methods: { demo(data){.....} }, mounted(){ this.pid = PubSub.subscribe('xxx', this.demo) // 订阅消息 }- 提供数据: PubSub.publish('xxx', 数据)
- 最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅
 
- 安装
示例:拿$bus的App.vue和SelectInput.vue为:
- 
安装依赖;不需要 main.js内写任何内容,但是需要在用到订阅发布的依赖组件内手动引入
- 
修改 SelectInput.vue组件: 
- 
修改 App.vue组件: 
- 
总结一下:其实不管是全局事件总线还是消息订阅与发布,我们都可以看出来,其实本质都是一样的:将自定义事件和数据存到一个公共的空间内,谁用谁去调。 










