简介
在 Vue 应用中，父组件向子组件传递数据是非常常见的操作。但是，当非父子组件之间需要通讯时，我们该如何实现呢？传统的做法是使用 Vuex 或者利用 event bus，但是这些方法会使代码更加复杂，并且会引入太多的依赖。
本文将介绍如何使用 RxJS 来实现 Vue 中非父子组件之间的通讯，它可以减少代码的复杂性，降低系统中的耦合度，以及提高系统的可维护性和可复用性。
RxJS 简介
RxJS 是一个基于 Observables 的响应式编程库，提供了一种解决异步问题的优雅方式。在 RxJS 中，一切皆为数据流，我们通过创建 Observables 来发射数据流，在数据流上进行操作，最后通过订阅数据流来获取数据。RxJS 的主要特点有：
- 数据流处理：RxJS 将所有的操作都视为处理数据流的操作，既可以处理同步数据，也可以处理异步数据。
- 响应式编程：RxJS 是一种响应式编程库，意味着我们可以通过订阅事件流来实现数据流自动更新，避免手动操作 DOM。
- 链式调用：RxJS 支持链式调用，可以基于 Observable 对象实现类似 jQuery 链式操作的一系列函数。
实现非父子组件通讯
在 Vue 应用中，我们可以通过 $emit 和 $on 来实现非父子组件之间的通讯。而在 RxJS 中，我们可以通过创建 Observables 来发射数据流，并使用 Subject 来将数据流发送给感兴趣的组件。
我们可以在组件中创建一个 RxJS 的 Subject 对象，通过这个对象向外发射数据流，并在组件销毁时取消订阅。接下来将演示如何实现一个非父子组件间的消息发送和接收的示例。
实现效果如下：
- 点击按钮发送消息
- 点击另一个按钮接收消息
实现方法如下所示：
- 创建 Subject 对象
首先，我们需要在组件中创建一个 Subject 对象：
------ - ------- - ---- -------
------ ------- -
------ -
------ -
---- --- ---------
--
--
-------- -
------------ -
-------------------
-
--
----------- -
-----------------------
-
--在上面的代码中，我们创建了一个 Subject 对象，用于发射数据流。
- 发送消息
在发送消息的组件中，我们可以通过调用 sendMsg() 方法来向外发射数据流：
----------
------- ---------------------- ---------------------
-----------
--------
------ --- ---- --------
------ ------- -
-------- -
------------ -
-----------------
-
-
--
---------在上面的代码中，我们在组件中引入了 bus.js 文件，并调用了 sendMsg() 方法向外发射数据流。
- 接收消息
在接收消息的组件中，我们需要在 created() 钩子函数中订阅数据流，并在 destroyed() 钩子函数中取消订阅：
----------
------------------
-----------
--------
------ - ------------ - ---- -------
------ --- ---- --------
------ ------- -
------ -
------ -
---- --
--
--
--------- -
-------- - -------------------
----- --- -- -
-------- - ----
-
---
--
----------- -
-----------------------
-
--
---------在上面的代码中，我们利用了 RxJS 的 subscription 机制来订阅数据流，并将更新后的数据赋值给组件的 msg 属性。
总结
本文介绍了如何使用 RxJS 实现 Vue 中非父子组件之间的通讯，这种方法可以减少代码的复杂性，降低系统中的耦合度，以及提高系统的可维护性和可复用性。RxJS 不仅可以用于 Vue，还可以用于 React 和 Angular 等前端框架，如果您不熟悉 RxJS 的使用，建议您先阅读一下官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665304dcd3423812e478a7d8