消息订阅与发布

消息订阅与发布

一、一种组件间通信的方式，适用于任意组件间通信

二、使用步骤：

1、安装pubsub-js npm i pubsub-js

2、引入pubsub-js库给收数据的组件（引入的这个pubsub是个对象）

import pubsub from 'pubsub-js'

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

methods（）{
 //这里的msgName一般使用不到，可以用一个_去占位(_,data)
	demo(msgName,data){
        .....
    }
}
....
mounted(){
    //
  this.pubId = pubsub.subscribe('hello', this.demo)
}


//或者不写methods，直接箭头函数完成
mounted(){
    //订阅消息
    //这里的function可以收到两个参数，一个是消息名，一个是传过来的数据
    this.pubId = pubsub.subscribe('hello', (msgName, data) =>{...})
}

这里如果写成这种形式，this是有问题的，this是undefined，所以要写成上面那样的箭头函数，指向的才是VC

this.pubId = pubsub.subscribe('hello', function (msgName, data) {
​        // console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data)
​        console.log(this); //undefined,因为用的是第三方的库

​      }) 

4、提供数据（发布消息）：

 methods: {
        sendStudentName() {
        // 发布消息
       pubsub.publish('hello', 1988)
          }
    },

5、最好在beforeDestroy钩子中，取消订阅

 beforeDestroy() {
            // 取消订阅,需要通过id取消
            pubsub.unsubscribe(this.pubId)
        },