消息订阅与发布

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

需要借助第三方库实现

安装

• 安装pubsub-js第三方库:

npm i pubsub-js

消息订阅

在需要订阅消息的页面引入pubsub-js

通过pubsub.subscribe('msgName', (name, data) => { ... })订阅消息, 其中回调中有两个参数

• name: 订阅消息的名称

• data: 订阅消息发布的数据

• 代码示例:

import pubsub from 'pubsub-js'
export default {
  mounted() {
    this.pubId = pubsub.subscribe('msgName', (name, data) => { ... })
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.punId)
  }
}

注意

最好在组件销毁前取消订阅, 需要通过id来取消订阅

消息发布

在需要发布消息的页面引入pubsub-js

通过pubsub.publish('msgName', data)发布消息

• 代码示例:

export default {
  methods: {
    doSomething() {
      pubsub.publish('msgName', this.msg)
    }
  }
}