介绍
callback-data-bus 是一个轻量级的 JavaScript 库，用来实现不同组件之间的数据通信。该库不依赖于任何框架，可以在任何 JavaScript 项目中使用。
安装
你可以通过 npm 安装 callback-data-bus：
--- ------- -----------------
也可以通过 yarn：
---- --- -----------------
使用示例
callback-data-bus 通过 on 和 emit 方法实现组件之间的数据传递。
我们先来看一个例子。假设我们有两个组件：一个是 ProductList，用来展示商品列表；另一个是 Cart，用来展示购物车中的商品。
-- --------------
------ --- ---- --------------------
--- ----------- - -
-
--- --
----- -------- ---
------ --
--
-
--- --
----- -------- ---
------ --
-
--
-------- -------- -
-- ----------
-
-------- ----------------------------- -
----------------------- ---------
-
------ ------- -
-------
--------------------
---- ------- ------ --- ---- -------------------- --- ---- - --- -------- -------- - -- ----------- - --------------------- --------- -- - ------------------- --------- --- ------ ------- - ------ --
在 ProductList 组件中，我们通过 bus.emit 发送了一个名为 add-to-cart 的事件，并且把商品信息作为参数传递。在 Cart 组件中，我们通过 bus.on 监听了这个事件，并且在回调函数里进行了购物车操作。
API 参考
emit(eventName[, ...args])
触发一个名为 eventName 的事件，并且把剩余的参数作为参数传递给回调函数。
------ --- ---- -------------------- --------------------- ------- ------- -----
on(eventName, callback)
监听一个名为 eventName 的事件，并且在触发事件时调用回调函数。
------ --- ---- -------------------- ------------------- -------- ------- ---- -- - -- -- --------- ---
off(eventName[, callback])
取消一个名为 eventName 的事件的监听，可以通过传入回调函数来只取消特定函数的监听。
------ --- ---- -------------------- --------------------- -------------------- ----------
总结
callback-data-bus 为组件间的数据通信提供了一种简单而有效的方式。相比于其他通信方式（如通过父组件传递 props 或使用 Vuex 等状态管理库），callback-data-bus 更加轻量，并且可以适用于多种场景。但是在使用过程中需要注意，过度使用会导致代码维护困难，建议在必要的时候使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79179