vue 消息订阅与发布 实现任意组件间的通信

一、 安装pubsub

npm i pubsub-js

二、 import引入

import pubsub from 'pubsub-js'

3、订阅

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

 methods(){
    demo(data){......}
  }
......
  mounted() {
    this.pubId = pubsub.subscribe('msgName',this.demo) //订阅消息执行demo回调函数
  }

箭头函数写法：

 mounted() {
    this.pubId = pubsub.subscribe('msgName',('msgName',data)=>{}) //订阅消息执行demo回调函数
  }

注意：回调函数中的第一个参数固定是消息名称，是固定写法，第二个参数才是传过来的数据，基本上这个函数的回调方法的第一个参数msgName是没用到的，所以可以使用英文下划线代替 _

this.pubId = pubsub.subscribe('msgName',(_,data)=>{})

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

  beforeDestroy() {
	 pubsub.unsubscribe(this.pubId) //接收的是一个订阅消息的Id，不是消息名称
       }

四、发布消息，提供数据

pubsub.publish('msgName',数据)