在前端开发中，我们经常需要在不同 Vue 组件之间进行事件通信。为了方便地实现组件间的数据传输和业务逻辑的处理，我们可以使用一个带有活动范围的事件系统，即 u-emitter.vue。
u-emitter.vue 是一个轻量级的组件事件系统，可以简化 Vue 组件之间的通信。该 npm 包提供了一种简单而灵活的 API，可以让开发者轻松地编写逻辑代码和实现组件之间的通讯。
安装 u-emitter.vue
要使用 u-emitter.vue，我们需要先安装它。通过 npm 命令行工具，可以简单地安装 u-emitter.vue，具体步骤如下：
在你的项目中执行以下命令：
npm install u-emitter.vue --save
在你的代码中，您需要导入 u-emitter.vue：
import UEmitter from 'u-emitter.vue'
快速使用
u-emitter.vue 是一个事件触发器，你可以使用它来触发与监听事件。
在你的 Vue 组件中，你需要引入 UEmitter 并在 data 选项中定义一个或多个事件名称。示例如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ ------- -
------ -
------ -
----------- -
------------ -------------
-
--
--
-- ------ ------
-------- -
--------------- -
----------------------------------------- - ----- ------ ------- ---
-
-
-上述代码中，我们首先在 data 选项中定义一个名为 eventNames 的对象属性。然后在 Button 的点击事件处理函数中，我们使用 UEmitter.emit() 触发指定的点击事件，并传递一个数据对象 { data: "Hello world!" }。
在其他的 Vue 组件中，我们可以使用 UEmitter.on() 方法监听特定的事件，并在事件触发时执行逻辑代码，如下示例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ ------- -
--------- -
--------------------------------------- ------------------
--
-- ----
-------- -
---------------------- -
--------------------- ----- ----- -- -----------
-
-
-上述代码中，我们使用 UEmitter.on() 方法来监听 Button 点击事件触发的事件，一旦 Button 触发了点击事件，我们定义的 handleEvent() 函数将会被调用并且会接收到 Button 发送的数据对象。
注意事项
- 所有组件在从 DOM 树中删除之前都必须取消侦听器，以免在组件被销毁时出现内存泄漏。建议使用
beforeDestroy()钩子函数取消侦听器。 - 如果要在调用 applyEvent 和 remove 的事件名称之后删除事件监听器，则必须将 Listeners 组件的activeRange设置为 ALL。
实战提高
在日常开发中，经常会碰到需要 对一个动态创建的组件的事件 进行监听或触发。通过一些高级用法，我们可以轻松地实现此类需求。
事件代理
由于 Vue 的强制约束，使用 Vue.$emit() 和 vm.$on() 来触发和监听动态组件的事件变得相对困难。在这个时候，我们可以使用 u-emitter.vue 委托事件处理程序的方式来解决这个问题。
通过以下代码，您可以将 u-emitter.vue 引入 Vue 原型链：
import Vue from 'vue' import UEmitter from 'u-emitter.vue'; Vue.prototype.$UEmitter = UEmitter
之后，我们可以在父组件中使用 $UEmitter.emit() 触发 child-component 子组件中的事件，示例如下：
methods: {
handleClick(val) {
this.$UEmitter.emit("my-event", val)
}
}在 child-component 子组件中，我们引入 u-emitter.vue，并使用 $UEmitter.on() 监听 my-event 事件，示例如下：
-- -------------------- ---- -------
----------
-----
----- ------- ------
------
-----------
--------
------ - -------- - ---- ---------------
------ ------- -
------ -
------ -
-------- ------ -----------
-
--
-----
--------- -
----------------------------- --------------------
--
----
--------------- -
---------------------------------
--
-------- -
------------------ -
------------ - ---
-
-
-
---------在 child-component 子组件中，我们使用 $UEmitter.on() 方法监听 my-event 事件，并在事件触发时更新组件中的 message 数据。当父组件中使用 $UEmitter.emit() 触发 my-event 事件时，child-component 组件将更新 message 数据并重新渲染。
插槽作用域
使用 Vue 插槽时，可以将 slot-scope 属性添加到 slot 中，以便控制组件的范围。与此类似，我们可以使用 u-emitter.vue 来指定自定义的活动范围并确保事件只在它们指定的组件内传递。
在父组件和子组件之间创建新的活动范围时，我们可以使用 UEmitter.Scope() 功能。使用该 API 可以创建一个自定义事件范围，确保在组件内部得到事件传递。
-- -------------------- ---- -------
----------
-----
---- --------- ---
--------------- ---------------
---------------- --
-----------------
------- -------------------------- -----------
------
-----------
--------
------ - -------- - ---- ---------------
------ ----- ---- -------------
------ ------- -
--------------
------------
-----
--
-------- -
--------------
-- ------------
---------------------------------------------- ---- --------
-
-
-
---------在父组件中，我们首先在 UEmitter.Scope 组件中创建一个自定义活动范围，并在内部嵌套子组件 child-component。parent 中的 handleClick() 方法使用 $refs 属性将自定义活动范围引用名称映射到父组件中的元素 ref 中，然后可以通过调用 $emit() 方法在特定的活动范围内触发一个自定义事件。
接下来，在 child-component 中，我们可以使用 UEmitter.on() 方法以及传递给作用域的特定名称来监听自定义事件，示例如下：
-- -------------------- ---- -------
----------
-----
---------- ---- ------- -- ------- ------
------
-----------
--------
------ - -------- - ---- ---------------
------ ------- -
------ -
------ -
-------- -------- --------
-
--
--------- -
-- -------------------------
--------------------------------------------- ------- -- -
------------ - -------
--
--
-- ----
--------------- -
-------------------------------------------------
-
-
---------在 created() 钩子函数中，我们使用 this.$scopeEvent() 方法以及传递给作用域的特定名称来监听自定义事件，并更新 message 数据以响应触发的事件。beforeDestroy() 钩子函数用于在组件被销毁之前删除监听器。
结束语
u-emitter.vue 提供了一个非常易于使用的事件系统，以帮助我们更好地管理我们的 Vue 组件。它提供了一个简洁的 API，可以轻松地触发、监听以及管理组件之间的事件。在我们的 Vue 项目中，u-emitter.vue 可以优化我们的代码结构和架构，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626181e8991b448dfa5b