Vue组件间通信--消息订阅与发布

适用于任何组件间通信

1.订阅消息：消息名（需要数据的组件）

2.发布消息：消息内容（提供数据的组件）

使用步骤：

   i 安装pubsub：npm i pubsub-js

   ii 引入: import pubsub from 'pubsub-js'

   iii 接收数据：A组件想接收B组件数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

 methods(){
          demo(msgName, data){......}
        }
        ......
mounted() {
//解决this指向问题 要不就在mounted里面写上箭头函数，要不然就写一个普通函数this.demo然后再methods中调用
          this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 
        }
.....
beforeDestroy(){
        pubsub.unsubscribe(this.pid)
}

   iv B组件提供数据：pubsub.publish('xxx',数据)

   v  最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。