介绍
touch-bus 是一个轻量级的前端事件总线库。它可以帮助我们在页面和组件之间传递事件和数据，使我们的代码更加清晰、简洁和易于维护。
touch-bus 是基于发布/订阅模式实现的，可以支持多个组件之间的通信，而且不需要引入任何其他的第三方库。
安装
我们可以使用 npm 来安装 touch-bus，命令如下：
npm install touch-bus --save
实例化
在使用 touch-bus 之前，我们需要先实例化一个 bus 对象。可以直接导入 touch-bus，然后创建一个新的 Bus 对象：
import Bus from 'touch-bus' const bus = new Bus()
发布事件
发布事件可以使用 publish 方法。如果我们想要向整个页面发布一个事件，可以这样写：
bus.publish('event-name', {data: 'event-data'})第一个参数是事件名称，第二个参数是事件的数据。可以根据需要定义任何数量的参数。
订阅事件
订阅事件可以使用 subscribe 方法。如果我们想要在某个组件中订阅一个事件，可以这样写：
bus.subscribe('event-name', data => {
console.log(data)
})第一个参数是事件名称，第二个参数是事件被触发时执行的回调函数。
取消订阅
取消订阅可以使用 unsubscribe 方法。如果我们要停止订阅一个事件，可以这样写：
bus.unsubscribe('event-name')示例代码
下面是一个示例代码，演示了如何使用 touch-bus 来发布和订阅事件：
-- -------------------- ---- -------
-- -------
------ --- ---- -----
------ --- ---- -----------
------ --- ---- -----------
------------------------ - -----
------------------ - --- -----
--- -----
------- - -- -------
-----------------
-- --------------
----------
-----
-------------------
------- ----------------------------- -----------
------
-----------
--------
------ ------- -
-------- -
-------------- -
------------------------------- ------ ------ ---------
-
-
-
---------
-- --------------
----------
-----
-------------------
------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- --
-
--
--------- -
--------------------------------- ---- -- -
------------ - ------------
--
--
--------------- -
-----------------------------------
-
-
---------在上面的例子中，我们创建了一个 Vue 实例并将 touch-bus 实例作为全局属性注入到 Vue 中。然后在 component1.vue 中发布了一个名为 “event-name” 的事件，随后在 component2.vue 中订阅了这个事件并且将事件的数据显示在了组件中。
总结
touch-bus 是一个简单而强大的前端事件总线库。它可以帮助我们更方便地管理组件的通信和数据传递，还可以帮助我们更好地组织代码和提高开发效率。在实际开发中，多多尝试使用 touch-bus，相信它会带给你很多惊喜。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067381890c4f7277584248