vue订阅消息和发布消息

上一个文章我们说到两个组件之间可以利用全局中间组件来实现，其实还有一个更简单的方法可以实现两个组件之间的通信，那就是订阅消息和发布消息。

    顾名思义也知道，需要数据的那个组件来订阅消息就可以了，然后等着那个有数据的组件来发布消息就可以了。理解起来也是很容易的。先画个图演示一波:

这个图也很清晰的描述了这样一个过程，当然，代码也是很好实现的，也都是键名之意：

    首先得需要一个第三方库，叫pubsub-js

npm i pubsub-js

安装完成之后我们就可以直接使用了

需要订阅消息的先订阅消息:

import pusub from 'pubsub-js';
export default {
mounted(){//挂载完成

//先订阅一个消息
this.pubid = pusub.subscribe("haha",(xiaoximing,data)=>{
  console.log('消息回调',data);
})

},
beforeDestroy(){

pusub.unsubscribe(this.pubid)

}
}
然后等着发送数据的组件来发布:

import pusub from 'pubsub-js';
export default {
methods:{

sub(){
  pusub.publish("haha",1);
}

}
}
然后来总结一下:

    订阅消息是 pusub.subscribe("订阅消息名称","(回调函数,第一个参数是消息名称，戴第二个参数是传回的数据)=>")

    发布消息是pubsub.publish("订阅消息名称"，“要发布的信息数据”);