当我们需要组件间通信时，一般有两种方式：事件监听和状态管理。 pubsub-distinct 是一个轻量级的事件发布/订阅模块，它可以跨模块传递数据，使得组件之间的通信变得简单。
安装 pubsub-distinct
在项目中使用 pubsub-distinct 需要先安装它，可以通过 npm 安装：
--- ------- --------------- ------
使用 pubsub-distinct
使用 pubsub-distinct 很简单，我们只需要在需要发布事件的地方发布事件，然后在需要订阅事件的地方订阅事件即可。
发布事件
------ ------ ---- ----------------- ---------------------------- -----
其中 event-name 是自定义的事件名，data 是需要传递的数据。data 可以是任意数据类型，包括数字、字符串、对象和函数等。
订阅事件
------ ------ ---- ----------------- ------------------------------ ------ -- - ----------------- --
其中 event-name 是需要订阅的事件名，(data) => {...} 是事件处理函数，data 是发布事件时传递的数据。
取消订阅
如果我们不再需要订阅某个事件，可以使用 pubsub.unsubscribe 取消订阅：
------ ------ ---- ----------------- ----- ------------ - ------------------------------ ------ -- - ----------------- -- -- ---- --------------------------------
其中 subscription 是调用 pubsub.subscribe 后返回的引用。
示例代码
下面是一个示例，我们先创建一个组件 sender.vue，该组件包含一个按钮，点击按钮后将数据发送给接收者组件：
----------
------- -------------------------------
-----------
--------
------ ------ ---- -----------------
------ ------- -
-------- -
-------- -- -
----------------------------- - ------ ------ ------ --
-
-
-
---------接着创建一个接收者组件 receiver.vue，该组件订阅 data-change 事件，接收到数据后将数据展示在页面上：
----------
-----
-- ---------- --
------
-----------
--------
------ ------ ---- -----------------
------ ------- -
---- -- -
------ -
----- - ------ -- -
-
--
------- -- -
------------------------------- ------ -- -
--------- - ----
--
-
-
---------现在，我们在页面中使用这两个组件即可实现组件间通信：
----------
-----
-----------------
---------------------
------
-----------
--------
------ ------ ---- -------------------------
------ -------- ---- ---------------------------
------ ------- -
----------- -
-------
--------
-
-
---------总结
pubsub-distinct 是一个方便实用的事件发布/订阅模块，可以使得组件之间的通信变得简单。在实际开发过程中，我们可以使用它来实现跨模块数据传递，提高代码的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005625281e8991b448df8f0