Vue任意组件间通信方式--两种方法

Vue中除了父子间通信，还有需要在兄弟之间通信或者祖孙之间通信的情况
而这两种情况下需要有更方便的通信方式，有以下两种：全局事件总线和消息订阅与发布

一、全局事件总线（GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线：

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

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

// 一、普通写法
methods(){
    demo(data) {......}
}
......
mounted() {
    this.$bus.$on('eventName',this.demo)
}

// 二、箭头函数写法
mounted() {
   this.$bus.$on('eventName',(data)=>{
      console.log(data)
    })
}

（2）提供数据： B组件中提供数据

this.$bus.$emit('eventName',数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

this.$bus.$off('eventName') 

二、消息订阅与发布（pubsub）

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

// 普通写法
methods(){
    demo(data){......}
}
......
mounted(){
    this.pid = pubsub.subscribe('eventName', this.demo)    // 订阅消息
}

// 箭头函数写法

mounted(){
    // 订阅消息
    this.pid = pubsub.subscribe('eventName', (eventName,data)=>{
        console.log(this)
    })   
}

5.提供数据：B组件提供数据

pubsub.publish('eventName',数据)

6.最好在beforeDestroy钩子中取消订阅

beforeDestroy(){
    pubsub.unsubscribe(this.pubId)
}

参考：任意组件间通信 （84–88集）