什么是 dom-event-hub？
dom-event-hub 是一个能够在页面中简化事件监听和处理的工具库，它允许你在组件之间传递事件，让你的代码更加模块化和易于维护。
安装
你可以使用 npm 安装 dom-event-hub：
--- ------- -------------
安装完成后，可以直接在应用程序中使用。
基本使用
在使用 dom-event-hub 之前，你需要新建一个 EventHub 对象，并将它作为一个参数传递给需要监听事件的组件。
------ -------- ---- ---------------
----- -------- - --- ----------
----- --------- -
------------- -
------------------------ ---- -- -
-- ------
--
-
-在上面的例子中，我们创建了一个 EventHub 对象并将其传递给了构造函数中的组件。事件监听器则在组件的构造函数中定义。
发送事件
一旦创建了 EventHub 对象，并在组件中注册了监听器，我们就可以发送事件了。使用 emit 方法可以指定事件的名称和传递给监听器的数据。
------ -------- ---- --------------- ----- -------- - --- ---------- -------------------------- -----
上面的例子中，我们向 EventHub 对象发送了一个名为 eventName 的事件，并传递了一个代表事件数据的 data 参数。
组件生命周期中的事件
在许多情况下，我们需要在组件的生命周期中发送特定的事件。例如，当组件被销毁时，我们可能需要清除一些资源。
dom-event-hub 提供了一些默认的事件，可以在组件生命周期的各个时刻触发。例如，当组件被销毁时，可以触发 beforeDestroy 事件：
------ -------- ---- ---------------
----- -------- - --- ----------
----- --------- -
------------- -
-------------- - -------------------------
---------------------------- ---------------
-
----------- -
-- --------
-
-上面的代码中，我们在组件的构造函数中定义了 onDestroy 函数，并向 beforeDestroy 事件添加了一个监听器。当事件触发时，onDestroy 函数会被调用。
示例代码
为了更好地演示 dom-event-hub 的使用，我们来看一个完整的例子。该例子中包含了一个父组件和两个子组件，它们之间通过 dom-event-hub 进行通信。
------ -------- ---- ---------------
----- -------- - --- ----------
----- ------ -
------------- -
------------------- - ------------------------------
------------------------- --------------------
----------- - --- --------
----------- - --- --------
-------------
-
-------------------- -
------------------- -------- ------- -----
-
-------- -
----- -------- - -----------------------------
------------------------------------------
------------------------------------------
-----------------------------------
-
-
----- ------ -
------------- -
------------------ - -----------------------------
-------------------------- -------------------
------- - -----------------------------
----------------- - -
------------- -----------
-
-
--------------- -
--------------------------- ------ ---- ---------
-
-------- -
------ -------
-
-
----- ------ -
------------- -
------- - -----------------------------
----------------- - -
--------- -- --------
-
-
-------- -
------ -------
-
-
--- --------在这个例子中，Parent 组件是通过新建两个子组件来创建的。其中，Child1 组件注册了一个 buttonClick 事件监听器，在按钮点击时向 childEvent 事件发送数据。Child2 组件只是一个简单的文本输出。
当点击按钮时，事件流依次为：Child1 组件发出 buttonClick 事件，dom-event-hub 传递该事件到 Parent 组件，Parent 组件接收事件数据并输出到控制台上。
这个例子展示了 dom-event-hub 非常方便的跨组件通信功能，大大简化了组件之间的关系。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f8d9381d61a3540f8d