消息订阅与发布

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

1. 使用步骤

2.1 安装pubsub

C:\Users\mi>npm i pubsub-js

2.2 引入第三方库

import pubsub from 'pubsub-js'

2.3 接收数据

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

methods(){
    demo(data){...}
}
......
mounted(){
    this.pid = pubsub.subscribe('xxx', this.demo)
}

2.4 提供数据

pubsub.publish('xxx'. 数据)

2.5 取消订阅

在beforeDestory钩子中，用PubSub.unsubscribe(pubId)去取消订阅

<template>
  <div class="demo">
    <h2>{{ msg }}</h2>
    <h2>学校名字：{{ name }}</h2>
    <h2>学校地址： {{ schoolAddress }}</h2>
    <button @click="subMsg">订阅消息</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: 'School',
  data() {
    return {
      msg: '欢迎大家！！',
      schoolAddress: '四川',
      name: '湘雅医学院',
    }
  },
  methods: {
    subMsg(){
      this.pubId = pubsub.subscribe('test', function (msgName, data){
          console.log(this)
          console.log("有人发布消息了，", msgName, data)
        })
    }
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId)//和之前的事件销毁不一样，Vue不会管理pubSub订阅发布，需要在Vue生命周期钩子里面取消订阅
  }
}
</script>

运行结果： 可见在pubsub-js订阅的回调函数中，没有this的指向, 对于我们经常需要操作data数据，可以这样调整：

methods: {
  subMsg(){
    this.pubId = pubsub.subscribe('test', (msgName, data)=>{
      console.log(this) // 使用箭头函数，this会在外面找，外面的this就是vc
      console.log("有人发布消息了，", msgName, data)
    })
  }
},
或者在methods里面单独写一个方法函数，然后在pubsub订阅中调用
methods: {
  handleMsg(msgName, data){
      console.log(this) // 使用箭头函数，this会在外面找，外面的this就是vc
      console.log("有人发布消息了，", msgName, data)
  },  
  subMsg(){
    this.pubId = pubsub.subscribe('test', this.handleMsg)
  }
},