消息订阅与发布pubsub-js的使用与案例

一、消息订阅与发布pubsub

1、作用

一种组件间通信方式

2、适用场景

任意组件间通信，适配Vue、Angular、React等库

3、理解

二、使用步骤

1、安装pubsub

npm i pubsub-js

2、引入

import pubsub from "pubsub-js"

3、消息订阅（接收数据）

mounted(){ this.pid = pubsub.subscribe("自定义事件",回调函数) }

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

pubsub.publish("自定义事件",数据)

5、取消订阅（解绑数据）

beforeDestroy(){ pubsub.unsubscribe(pid) }

三、案例演示

需求：通过消息订阅与发布实现组件间通信（School组件接收来自Student组件的数据）
School组件

<template>
  <div>
    <p>学校名称：{{name}}p>
    <p>学校地址：{{adress}}p>
    <p>School组件订阅的消息是：{{sName}}p>
  div>
template>

<script>
//引入pubsub
import pubsub from "pubsub-js";
export default {
  name:"School",
  data(){
    return {
      name:"喵喵学院",
      adress:"郑州",
      sName:""
    }
  },
  mounted(){
    //消息订阅
   this.pid = pubsub.subscribe("getName",(msgName,data)=>{
      this.sName=data;
    })
  },
  //取消订阅
  beforeDestroy(){
    pubsub.unsubsrcibe(pid);
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Stundet组件

<template>
  <div>
    <p>学生性别是：{{sex}}p>
    <button @click="sendMsg">点击向School发布消息button>
  div>
template>

<script>
//引入pubsub
import pubsub from "pubsub-js";
export default {
  name:"Student",
  data(){
    return {
      name:"憨瓜",
      sex:"男"
    }
  },
  methods:{
    sendMsg(){
    //发布消息
      pubsub.publish("getName",this.name)
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

运行结果

四、注意点

1、订阅消息回调函数

pubsub.subscribe("自定义事件",回调函数)
回调函数接收两个参数

① 第一个参数输出的是自定义事件的名称
② 第二个参数为接收数据

2、订阅消息需要声明一个变量接收

类似于定时器，每次调用订阅消息都会收到一个新的id，因此需要声明一个变量接收
this.pid = pubsub.subscribe("自定义事件",回调函数)
需要取消订阅消息时
beforeDestroy(){ pubsub.unsubsrcibe(pid); }