Vue2脚手架中的消息订阅与发布（pubsub）

1.理解:实现任意组件间通信

pubsub对应publish发布和subscribe订阅的意思，把第三方库pubsub.js拿过来就可以实现在任何一个框架里面进行消息的订阅与发布

类比

• 微信群：是消息管理中心（pubsub）。
• 群成员A，B：相当于两组件。
• 话题：对应消息名称。

过程

1. 订阅：成员关注某话题，如 “团购”。Vue 组件用subscribe关注消息。
2. 发布：B发 “团购水果” (消息名)消息。Vue 组件用publish发消息。（消息里面带着数据666）
3. 接收：关注 “团购” 的成员A看到消息。Vue 订阅组件执行回调。
4. 取消：成员屏蔽 “团购” 话题。Vue 组件用unsubscribe取消。

2.步骤 

        》在code终端安装库：npm i pubsub-js

        》引入 import pubsub from  'pubsub-js'

        》 B组件提供“团购水果消息”pubsub.publish('团购水果消息'，666)

        》A组件订阅消息

第一种写法：

mounted(){

        this.pid = pubsub.subscribe('水果团购消息'，（msgName,data）=>{

                //msgName是消息名，data是真正的数据；这种写法只能用箭头函数

})

}

第二种写法：

methods(){

        demo(data){......}

      }

      ......

      mounted() {

        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息

      }

        》取消订阅：

最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>