Vue任意组件间通信

全局事件总线（GlobalEventBus）

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

• 安装全局事件总线：

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

• 使用事件总线：

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

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

     2. 提供数据：this.$bus.$emit('xxxx',数据)

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

消息订阅与发布（pubsub）

• 一种组件间通信的方式，适用于任意组件间通信。
• 使用步骤：

     1. 安装pubsub：npm 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)```去取消订阅。