首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
10.1 注册自定义指令
10.1.1 全局自定义指令
10.1.2 局部自定义指令
10.2 钩子函数
10.3 绑定值的类型
10.3.1 绑定数值
10.3.2 绑定字符串
10.3.3 绑定对象字面量
11.1 注册组件
11.1.1 注册全局组件
11.1.2 注册局部组件
11.2 向子组件传递数据
11.2.1 Prop基本用法
11.2.2 数据验证
11.3 监听子组件事件
11.3.1 监听自定义事件
11.3.2 监听原生事件
11.4 插槽的使用
11.4.1 基础用法
11.4.2 编译作用域
11.4.3 默认内容
11.4.4 命名插槽
11.4.5 作用域插槽
11.5 混入
11.5.1 基础用法
11.5.2 选项合并
11.6 动态组件
11.6.1 动态组件的用法
11.6.2 缓存效果
12.1 什么是组合API
12.2 setup()函数
12.3 响应式API
12.3.1 reactive()方法
12.3.2 watchEffect()方法
12.3.3 ref()方法
12.3.4 computed()方法
12.3.5 watch()方法
12.4 生命周期钩子函数
12.5 使用ref获取DOM元素
13.1 单元素过渡
13.1.1 CSS过渡
13.1.2 过渡的类名
13.1.3 自定义过渡的类名
13.1.4 CSS动画
13.1.5 使用JavaScript钩子函数实现动画
13.2 多元素过渡
13.2.1 多元素过渡的用法
13.2.2 设置元素的key属性
13.2.3 过渡模式的设置
13.3 多组件过渡
13.4 列表过渡
14.1 什么是虚拟DOM
14.2 render()函数的使用
14.2.1 基本用法
14.2.2 h()函数
14.3 使用JavaScript代替模板功能
15.1 路由基础
15.1.1 引入Vue Router
15.1.2 基本用法
15.1.3 动态路由匹配
15.1.4 命名路由
15.2 编程式导航
15.3 嵌套路由
15.4 命名视图
15.5 高级用法
15.5.1 beforeEach钩子函数
15.5.2 scrollBehavior方法
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(三)
小册名称：Vue.js从入门到精通(三)
### 11.3.1 监听自定义事件 在Vue.js的组件化开发过程中，事件监听是组件间通信的重要手段之一。除了监听Vue实例和DOM元素上的原生事件外，Vue还允许我们定义和监听自定义事件，这在父子组件或任何需要显式通信的组件间尤为有用。自定义事件提供了一种灵活的方式来解耦组件间的逻辑，使得代码更加清晰、易于维护。本章节将深入探讨如何在Vue.js中监听自定义事件，包括事件的定义、触发以及监听过程。 #### 11.3.1.1 理解自定义事件 在Vue.js中，自定义事件不是由DOM元素直接触发的，而是由Vue组件通过`$emit`方法显式地触发的。这意味着，当组件内部发生某些特定操作时，组件可以主动通知其父组件或监听该事件的任何其他组件。自定义事件的名字可以是任何字符串，但最好遵循一定的命名规范，以提高代码的可读性和可维护性。 #### 11.3.1.2 定义并触发自定义事件 在子组件中，你可以使用`this.$emit('eventName', [...args])`来触发一个名为`eventName`的自定义事件，并传递任意数量的参数给事件的监听者。这里的`eventName`是自定义事件的名称，`[...args]`是传递给监听函数的参数列表，可以为空。 **示例**： 假设我们有一个名为`ChildComponent`的子组件，当用户点击按钮时，我们想要通知父组件这个操作已经发生。 ```vue <!-- ChildComponent.vue --> <template> <button @click="notifyParent">点击我通知父组件</button> </template> <script> export default { methods: { notifyParent() { // 触发名为'custom-event'的自定义事件，并传递一个消息 this.$emit('custom-event', '来自子组件的消息'); } } } </script> ``` #### 11.3.1.3 在父组件中监听自定义事件 在父组件中，你可以通过`v-on`指令（或其简写形式`@`）来监听来自子组件的自定义事件。当事件被触发时，父组件中指定的方法将被调用，并且接收来自子组件传递的参数。 **示例**： 继续上面的例子，现在我们在父组件中监听`ChildComponent`触发的`custom-event`事件。 ```vue <!-- ParentComponent.vue --> <template> <div> <child-component @custom-event="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(message) { console.log(message); // 输出：来自子组件的消息 // 在这里处理接收到的消息 } } } </script> ``` #### 11.3.1.4 自定义事件的优势与应用场景 自定义事件在Vue.js开发中有着广泛的应用场景，包括但不限于： - **父子组件通信**：最常见的场景之一，子组件通过触发自定义事件向父组件发送消息，实现数据的逆向流动。 - **兄弟组件通信**：虽然Vue官方推荐使用Vuex或Provide/Inject模式来处理兄弟组件间的通信，但在某些简单场景下，通过共同的父组件转发自定义事件也是一种可行的解决方案。 - **跨级组件通信**：对于跨越多层嵌套的组件间通信，自定义事件配合事件总线（Event Bus）或Vuex状态管理库可以实现高效的数据传递。 - **组件解耦**：自定义事件允许我们在不直接引用对方组件实例的情况下进行通信，这有助于保持组件的独立性和可重用性。 #### 11.3.1.5 进阶话题：事件修饰符与自定义事件 Vue.js为`v-on`指令提供了一系列事件修饰符，如`.stop`、`.prevent`、`.capture`等，用于处理DOM事件的特定行为。虽然这些修饰符直接作用于DOM事件，但了解它们有助于理解事件处理的细节，并可能在某些特定场景下与自定义事件结合使用，以达到更精细的控制。 然而，需要注意的是，由于自定义事件并非由DOM元素直接触发，因此像`.prevent`这样的修饰符并不适用于自定义事件。但`.once`修饰符（表示事件只触发一次）和`.capture`修饰符（表示在捕获模式下触发监听器）在监听自定义事件时仍然有效。 #### 11.3.1.6 结论 监听自定义事件是Vue.js组件间通信的重要手段之一，它提供了灵活且解耦的方式来处理组件间的数据传递和逻辑交互。通过合理使用自定义事件，我们可以构建出更加清晰、可维护的Vue应用。在本章中，我们深入探讨了自定义事件的定义、触发和监听过程，并讨论了其在实际开发中的应用场景和优势。希望这些内容能帮助你更好地理解和使用Vue.js中的自定义事件功能。
上一篇：
11.3 监听子组件事件
下一篇：
11.3.2 监听原生事件
该分类下的相关小册推荐：
Vue.js从入门到精通(四)
TypeScript和Vue从入门到精通(三)
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(四)
Vue.js从入门到精通(二)
移动端开发指南
TypeScript和Vue从入门到精通(一)
TypeScript和Vue从入门到精通(二)
Vue源码完全解析
Vue3技术解密
TypeScript和Vue从入门到精通(五)
Vue原理与源码解析
