什么是 dom-event-hub？
dom-event-hub 是一个能够在页面中简化事件监听和处理的工具库，它允许你在组件之间传递事件，让你的代码更加模块化和易于维护。
安装
你可以使用 npm 安装 dom-event-hub：
npm install dom-event-hub
安装完成后，可以直接在应用程序中使用。
基本使用
在使用 dom-event-hub 之前，你需要新建一个 EventHub 对象，并将它作为一个参数传递给需要监听事件的组件。
-- -------------------- ---- ------- ------ -------- ---- --------------- ----- -------- - --- ---------- ----- --------- - ------------- - ------------------------ ---- -- - -- ------ -- - -展开代码
在上面的例子中，我们创建了一个 EventHub 对象并将其传递给了构造函数中的组件。事件监听器则在组件的构造函数中定义。
发送事件
一旦创建了 EventHub 对象，并在组件中注册了监听器，我们就可以发送事件了。使用 emit 方法可以指定事件的名称和传递给监听器的数据。
import EventHub from 'dom-event-hub' const eventHub = new EventHub() eventHub.emit('eventName', data)
上面的例子中，我们向 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
