pubsub消息订阅与发布

最新推荐文章于 2024-01-01 20:40:09 发布

原创最新推荐文章于 2024-01-01 20:40:09 发布 · 865 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #npm

本文介绍了PubSub作为组件间通信的一种方式，通过npm安装和基础语法，详细阐述了消息的发布、订阅及取消订阅操作。在实际应用中，展示了如何在父组件中引导子组件进行消息传递，并提倡使用常量进行订阅和发布的命名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

一种组件间通信的方式，适用于任意组件间通信，与全局事件总线类似

npm安装

npm i pubsub-js

组件中引入使用

import pubsub from 'pubsub-js'

基础语法

消息发布：

pubsub.publish('用于订阅的值', 传值)

消息订阅：

PubSub.subscribe(‘用于订阅的值’, 回调函数)

回调函数的参数：有两个参数

第一个：用于订阅的值

第二个：传过来的值

取消订阅：

单个： pubsub.unsubscribe(‘订阅消息的变量’)

这个变量类似于我们定义定时器时的变量，相当于给他个名称，方便我们操作

所有： pubsub.clearAllSubscriptions()

使用

父组件中引入三个子组件

<oneVue />
<twoVue />
<thrVue />

第一个子组件发布消息

// html
<button @click="send">给值</button>

// js
msg: 'one的msg'

send() {
  pubsub.publish('send', this.msg)
  this.msg += '!'
}

其他两个子组件订阅消息

// html
two的msg <span>{{ msg }}</span>
// js
msg: 'two的msg'

mounted() {
  this.pubsubMsg = pubsub.subscribe('send', (msgName, data) => {
    console.log(msgName, data)
    this.msg = data
  })
},

beforeDestroy() {
  pubsub.unsubscribe(this.pubsubMsg)
}

点击几次传值

使用常量

pubsub推荐我们使用常量名称，就是上面例子中的 ‘send’

在一个js文件中定义好常量，在我们使用订阅和发布时在组件中引入

// 定义并导出
export const MY_TOPIC = Symbol('MY_TOPIC')

// 引入并使用
import { MY_TOPIC } from 'js文件夹'
PubSub.subscribe(MY_TOPIC, function (msg, data) {
	console.log(data)
});

PubSub.publish(MY_TOPIC, 'world');