PubSub发布订阅模式与Vue组件通信

     面对兄弟组件通信，需要让某组件通过props的方法将信息传递给父组件，再由父组件传递给目标兄弟组件。这样的通信十分繁琐，在不使用redux技术的前提下可以尝试使用消息的订阅-发布机制来实现通信。有很多的工具实现了该方法，这里介绍PubSub工具发布(publish)订阅(subscribe)消息实现兄弟组件之间的通信。

下载： npm i pubsub-js -s     /      yarn add pubsub-js

使用：1) import PubSub from 'pubsub-js' // 引入

           2) PubSub.subscribe('delete', function (data) {  }); // 订阅

           3) PubSub.publish('delete',data); // 根据订阅的消息进行消息发布

     贴出github上的使用方法，在需要接收数据的组件里订阅消息，然后设置好订阅消息的名称。

// create a function to receive the topic
// 第一个参数msg是消息名称 第二个参数data是别人想传递过来的数据
var mySubscriber = function (msg, data) {
    console.log(msg, data);
};

// subscribe实现消息的订阅 第一个参数是消息的名称 第二个参数的函数在收到消息后进行调用
// 这里的token类似setInterval的timer作为标识 当不再订阅消息时通过这个token取消订阅
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

// unsubscribe this subscriber from this topic
// 根据token标识取消订阅
PubSub.unsubscribe(token);

示例：

/**
*  在componentDidMount的生命周期中常用来做一些初始化的事，如进行开启定时器、发布消息等方法
*  在需要接收信息的组件中订阅消息
*/
componentDidMount () {
    this.token = Pubsub.subscribe('answer', (msg, data)=>{
        console.log(data)
    })
}

/**
*  取消消息订阅
*/
componentWillUnmount () {
    Pubsub.unsubscribe(this.token)
}


/**
*  发布消息的组件，在某个具体调用的方法中进行消息发布
*/
search = ()=>{
    Pubsub.publish('answer', {name: 'imlzz', age: 20})
}

前面介绍的是在React中使用PubSub这个工具来实现兄弟间的发布订阅模式，接下来复习一下如何在Vue中利用该模式的思想实现父子组件之间的通信。

这里介绍两种方法。

首先看看第一种，这一种方法参考了React是如何父子通信的，父组件创建一个函数作为发布事件，该函数可以带上参数。接下来在子组件中调用该函数，在调用的过程中可以将子组件中的数据作为参数进行调用。这样的方式就是所谓的：父组件只负责实现各种逻辑代码，不考虑具体数据。

代码分析：

 

 父组件将一个函数作为prop传递给子组件，然后子组件通过prop接收，并且在具体函数中通过this.getSchoolName(childData)执行该函数，最后在父组件中打印： App收到了学校名：子组件中的数据。

再来看第二种方法，传统的this.$emit方法，在父组件中通过v-on自定义一个函数，然后子组件在某时刻通过this.$emit('xxx',params)调用该函数即可。

 

需要补充的是，$emit方法其实有一个对应的方法$on，利用ref获取到元素之后，可以直接通过$on方法表示发布了一个任务。这样写的好处是更灵活了，假设我们现在需要让父元素在5秒后将任务发布给子元素，那么可以在这里的mounted中添加一个定时器。

这一系列配套的还有.$off方法取消注册自定义事件，多个事件保存在一个数组中。

this.$off(['xxxxevent', 'xxEvent'])