在前端开发中，有时候需要在不同的组件或页面之间传递数据，而这时我们就需要使用到 PubSub（发布-订阅）模式。而在实现 PubSub 的过程中，可以使用 npm 包 @changyan/pubsub ，它是一个轻量、易用、无依赖的 PubSub 实现，本文将为大家详细介绍如何使用这个 npm 包。
安装
使用 npm 安装：
npm install @changyan/pubsub --save
使用
引入
import PubSub from '@changyan/pubsub'
或者使用 require 导入：
const PubSub = require('@changyan/pubsub')订阅
PubSub.subscribe('topic1', (data) => {
console.log('接收到数据：', data)
})以上代码表示订阅了名为 topic1 的主题，并且在接收到该主题的消息时，会将数据打印到控制台。
如果要订阅多个主题，可以使用数组的方式：
PubSub.subscribe(['topic1', 'topic2'], (data) => {
console.log('接收到数据：', data)
})以上代码表示订阅了名为 topic1 和 topic2 的两个主题。
发布
PubSub.publish('topic1', 'hello world')以上代码表示发布 topic1 主题，并传递了一个字符串参数 hello world。
如果要发布多个主题，可以使用循环的方式：
['topic1', 'topic2'].forEach((topic) => {
PubSub.publish(topic, 'hello world')
})以上代码表示发布了 topic1 和 topic2 两个主题。
取消订阅
当需要取消对某个主题的订阅时，可以使用 unsubscribe 方法：
const callback = (data) => {
console.log('接收到数据：', data)
}
PubSub.subscribe('topic1', callback)
PubSub.unsubscribe('topic1', callback)以上代码表示取消订阅了名为 topic1 的主题，并且取消了 callback 回调函数。
一次性订阅
当只需要接收到一次某个主题的消息时，可以使用 once 方法：
PubSub.once('topic1', (data) => {
console.log('接收到数据：', data)
})
PubSub.publish('topic1', 'hello world')
PubSub.publish('topic1', 'hello world')以上代码表示订阅了名为 topic1 主题，并且只会在接收到一次消息时输出日志。
示例代码
下面是一个示例代码，它演示了如何使用 @changyan/pubsub 实现组件之间的通信：
-- -------------------- ---- -------
-- ----------
------ ------ ---- ------------------
------ ------- -
-------- -
------ -
------------------------- -------------
------------ - --
-
-
-
-- ------------
------ ------ ---- ------------------
------ ------- -
------ -
------ -
-------- --
-
--
--------- -
--------------------------- ------ -- -
------------ - ----
--
-
-以上代码分别定义了一个发送者组件 Sender 和一个接收者组件 Receiver，发送者组件负责发布名为 message 的主题，接收者组件则订阅该主题并接收数据。这样两个组件就可以进行数据通信了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005629f81e8991b448dfcc1