消息订阅发布

组件间通信方式,适用于任意组件间通信。

消息订阅发布需要使用第三方库,例如可以使用pubsub-js:

  1. # 安装pubsub-js
  2. npm i pubsub-js

使用:

  1. 引入组件
    1. import pubsub from 'pubsub-js'
  1. 消息订阅
    1. mounted() {
    2. // 使用subscribe方法订阅消息
    3. // 第1个参数:订阅的消息名,第2个参数:回调函数
    4. // 回调函数的参数:第1个参数:订阅的消息名,第2个参数:接到的数据
    5. this.pubId = pubsub.subscribe('studentNameMsg', (msgName, studentName) => {
    6. this.studentName = studentName;
    7. });
    8. },
    9. beforeDestroy() {
    10. // 取消订阅时,需要根据订阅时返回的id取消订阅
    11. pubsub.unsubscribe(this.pubId);
    12. }
    13. }
  1. 消息发布
    1. sendStudentName() {
    2. pubsub.publish('studentNameMsg', this.name)
    3. }

pubsub的回调函数中,第一个参数是订阅的消息名,这个参数一般用不到,但是还需要占位,一般使用_进行占位:

  1. function demo(msgName, studentName) {
  2. // .....
  3. }
  4. // msgName用不到,可以使用_占位
  5. function demo2(_, studentName) {
  6. // ....
  7. }