在前端开发中，我们常常需要实现一个事件总线来进行组件之间的通信。在 RxJS 中，我们可以通过 Subject 类来实现这样的事件总线。
Subject 是什么？
Subject 是 RxJS 中最重要的类之一。它是 Observable 和 Observer 的结合体，既可以作为 Observable，也可以作为 Observer。
Subject 有一种特殊的行为：它可以多路广播（multicast）一个值或者事件流到多个 Observer 上。这意味着一个 Subject 可以作为一个事件总线，用来进行多个组件之间的通信。
如何使用 Subject 实现事件总线
使用 Subject 实现事件总线非常简单。我们可以创建一个全局的 Subject 实例，并将它导入到需要进行通信的组件中。然后，我们可以通过 Subject 的 next 方法来发送一个值给所有的 Observer，这些 Observer 可以是同步的、异步的、甚至是另外一个 Subject。下面是一个示例代码：
-- -------------------- ---- -------
------ - ------- - ---- -------
------ ----- -------- - --- ----------
---
- ------
--
-------- --------------- ------- ------ ---- -
------------------------- -------
-
---
- ------
- ------------
--
-------- ------------- ------- --------- ------- ---- -- ------ ------------ -
------ -------------------------- -- -
-- ---------------- --- ---------- -
---------------------
-
---
-在上面的代码中，我们首先创建了一个全局的 Subject 实例 eventBus。然后，我们定义了一个 emit 函数，用来发送一个事件，和一个 on 函数，用来监听一个事件。
示例应用
为了演示 Subject 如何实现事件总线，我们可以创建一个简单的应用。这个应用有两个组件，一个是发送按钮，一个是接收文本框。当用户点击发送按钮时，发送一个事件，将文本框的值传递给接收组件并显示。
首先，我们来创建发送组件：
-- -------------------- ---- -------
----------
-----
------ ------------------
------- --------------------------------
------
-----------
--------
------ ------ ---- -------------
------ ------- -
------ -
------ -
-------- --
--
--
-------- -
------------- -
--------------- --------------
-
-
--
---------在发送组件中，我们绑定了一个文本框和一个发送按钮，并且在发送按钮被点击时，调用 emit 函数发送一个名为 message 的事件，并且携带了文本框的内容。
然后，我们来创建接收组件：
-- -------------------- ---- -------
----------
-----
------ ------------------
------
-----------
--------
------ ---- ------------- ---- -------------
------ ------- -
------ -
------ -
-------- --
--
--
--------- -
----------------- - ------------- --------- -- -
------------ - --------
---
--
----------- -
-- ------------------- -
--------------------------------
-
-
--
---------在接收组件中，我们使用 on 函数来监听名为 message 的事件，并且在事件触发时将文本框的值更新。
由于 on 函数返回了一个 Subscription 对象，我们可以在组件的 destroyed 钩子中，取消对事件的订阅。
最后，在应用的入口文件中注册两个组件：
-- -------------------- ---- -------
------ --- ---- ------
------ ---- ---- -------------
------ ------- ---- ----------------
--- -----
--- -------
----------- -
----------- -----
-------------- -------
-
---至此，我们就可以使用 Subject 来实现一个事件总线来实现组件通信啦！
总结
在本文中，我们介绍了 RxJS 中的 Subject 类，并展示了如何使用 Subject 实现一个简单的事件总线。这种方式非常适合于组件之间的通信，特别是当组件之间有着较深的嵌套关系时。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9f7f6add4f0e0ff2836d6