前言
在 web 前端开发过程中，组件化的思想越来越流行，而组件之间的通信是一个必须解决的问题。在这方面， microbus 是一个方便、易用的 npm 包，它提供了一种消息总线的机制，使得组件之间的通信变得更加简单、直观。
安装
通过 npm 安装：
npm install --save microbus
基本用法
创建总线对象
import Microbus from 'microbus'; const bus = new Microbus();
监听事件
bus.on('event1', (data) => {
console.log(`event1 is triggered! data passed: ${data}`);
});触发事件
bus.trigger('event1', 'Hello, Microbus!');高级用法
命名空间
microbus 支持命名空间，在这个基础上，我们可以实现更加细粒度的组件通信。创建一个命名空间的示例：
const nsBus = bus.ns('namespace1');监听命名空间事件
nsBus.on('event1', (data) => {
console.log(`namespace1.event1 is triggered! data passed: ${data}`);
});触发命名空间事件
nsBus.trigger('event1', 'Hello, namespace1.event1!');取消事件监听
const handler = (data) => {
console.log(`event2 is triggered! data passed: ${data}`);
};
bus.on('event2', handler);
bus.off('event2', handler); // 取消监听例子：父子组件通信
下面我们通过一个简单的父子组件通信的例子来说明 microbus 的用法。
假设我们有一个父组件和一个子组件。父组件有一个输入框，子组件需要获取输入框的值进行一些操作。
父组件
-- -------------------- ---- -------
------ -------- ---- -----------
------ ------- -
----- ---------
------ -
------ -
--------- ---
--
--
-------- -
----------------- -
------------- - -------
--
--
--------- -
----- --- - --- -----------
---------------------- ----------------
-------------------------------- -- -- -
----------------------- ----------------
---
--
--------- ------
------ ------------------ -------------------------------- ----------------------
------
--
--父组件中维护了一个输入框的值 inputVal，并且在 updateVal 方法中对这个值进行更新。在 created 钩子函数中，创建了一个 microbus 实例，监听名为 input-update 的事件，并将 updateVal 方法作为处理程序。
另外，在父组件中，我们使用了 $emit 方法触发了一个名为 update:inputVal 的自定义事件。这个自定义事件会传递一个值，即当前输入框中的值。我们在子组件中监听这个自定义事件，并将其作为输入框的值。
子组件
-- -------------------- ---- -------
------ -------- ---- -----------
------ ------- -
----- --------
------ -
------ -------
--
------ -
------ -
-------------- ---
--
--
------ -
------------- -
------------------ - -------
--
--
-------- -
-------------- -
----- --- - --- -----------
--------------------------- --------------------
--
--
--------- ------
------ ----------------------- ----------------------
------
--
--子组件中有一个输入框，它的值需要与父组件中的输入框同步，在父组件中输入的值会触发一个自定义事件，在子组件中进行监听并更新输入框的值。
另外，在输入框中 @input="updateParent" 中绑定的方法，当子组件中的输入框值更新时，会触发一个名为 input-update 的事件，在这个事件中，我们将子组件当前输入框的值传递给父组件进行更新。
以上，即为一个简单的父子组件通信实现。通过 microbus 提供的事件总线机制，我们可以非常方便、高效地实现组件通信。
结语
这篇文章介绍了 microbus 的用法以及一个简单的父子组件通信实现。希望能够帮助读者更好地理解和应用 microbus。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f441d8e776d08040ed5