在前端开发过程中，有时候需要使用消息广播等机制，将一条消息通知到多个组件内，对于这种情况，我们可以使用npm包 broadcast-center。
本文将详细说明如何使用 npm 包 broadcast-center，并提供示例代码以供参考。
安装broadcast-center
在使用npm包broadcast-center之前，首先需要进行安装。在终端中输入如下命令：
--- ------- ---------------- ------
安装成功后，便可以在项目中使用 broadcast-center 了。
基本用法
使用npm包 broadcast-center 需要有一个中心化的消息管理类，来管理消息的分发，我们可以封装 broadcast-center 对象来完成这个任务。
------ - ---------------- --------------- - ---- ------------------- -- --- --------------- ----- --------------- - --- ------------------ -- ---- --------------------------------------- ------ -- - ------------------ ----- ------------------ ----- ------------------------------- --- -- ---- ----------------------------------------- - ---------- ------ ----- - ---- ----- - ---
上面的示例代码中，首先使用 import 语句加载 broadcast-center 包，然后实例化了 BroadcastCenter 类，并通过 on() 方法为这个实例绑定了一个事件监听器。最后调用 emit() 方法触发了 ALL 事件。
可以看出，broadcast-center 的使用，很类似于 Node.js 的 EventEmitter 模块。
示例
下面给出一个示例代码，该示例演示使用 broadcast-center 实现在主页面点击“删除用户”按钮，删除某个用户，并广播消息到所有组件，当依赖这个用户的组件收到消息后，重新渲染页面。
我们先定义一个 UserDelete 组件，负责渲染一个删除用户的按钮，删除某个指定的用户。在用户被删除时，广播 DeleteUser 事件，携带被删除用户的信息。
------ ----- ---- --------
------ - ---------------- --------------- - ---- -------------------
----- --------------- - --- ------------------
----- ---------- ------- --------------- -
---------- - -- -- -
----- ---- - - ----- ------- --
-- -- ---------- --
------------------------------------------------- - ---- ---
------------------- ------ ------
-
-------- -
------ -
------- ---------------------------------------
--
-
-
------ ------- -----------然后我们定义一个 UserDetail 组件，该组件可以显示指定用户的详细信息，并使用 broadcast-center 来监听 DeleteUser 事件，当 DeleteUser 事件被广播时，重新加载用户的详细信息。
------ ----- ---- --------
------ - ---------------- --------------- - ---- -------------------
----- --------------- - --- ------------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
----- -----
--
-
------------------- -
-- -------
----------------------------------------------- -------------------
-
---------------------- -
-- -------
----------------------------------------------------------- -------------------
-
------------ - ------ -- -
----- - ---- - - -----
-------------------- ------ ------- ------
-- --------------------
-- ----------
--------------------- ----- -------------- -------- - ---- - ---
-- --------
--------------- ----- ---- ---
-
-------- -
----- - ---- - - -----------
-- ------- -
------ --------------------
-
------ -
---- ------------------------
-------- ---------------
---------- -----------------
--------- ----------------
------
--
-
-
------ ------- -----------最后，我们将 UserDelete 和 UserDetail 组合起来，放到页面中。
------ ----- ---- --------
------ ---------- ---- --------------------------
------ ---------- ---- --------------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----------- --
----------- --
------
--
-
-
------ ------- ----以上代码演示了如何使用 broadcast-center 实现组件间的消息广播和监听，可以让我们更方便地实现复杂的组件通信。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8accdc64669dde51ea