首页
技术小册
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 监听子组件事件 在Vue.js的组件化开发模式中，父子组件之间的通信是构建大型应用不可或缺的一部分。子组件经常需要向父组件发送消息，通知某些状态的变化或事件的发生，这时就需要使用到Vue的事件系统。本章将深入探讨如何在Vue.js中监听子组件事件，包括事件的定义、触发、监听以及最佳实践。 #### 11.3.1 理解Vue事件机制 在Vue中，组件的自定义事件是一种子组件向父组件通信的方式。不同于DOM事件，Vue的自定义事件完全是在Vue的实例之间传递的，不直接涉及DOM元素。这种机制允许开发者创建高度解耦和可复用的组件系统。 #### 11.3.2 子组件中定义和触发事件 **定义事件**： 在子组件中，你可以使用`$emit`方法来触发一个自定义事件。`$emit`接受至少一个字符串参数，即事件的名称，随后可以跟随任意数量的参数，这些参数将被传递给事件的监听器。 ```vue <template> <button @click="notifyParent">通知父组件</button> </template> <script> export default { methods: { notifyParent() { this.$emit('custom-event', '这是传递给父组件的信息'); } } } </script> ``` 在上述例子中，当按钮被点击时，子组件通过`$emit`触发了一个名为`custom-event`的自定义事件，并传递了一个字符串作为参数。 **触发带有多个参数的事件**： 如果需要传递多个参数给监听器，可以直接在`$emit`方法后列出所有参数。 ```vue this.$emit('another-event', arg1, arg2, arg3); ``` #### 11.3.3 父组件中监听子组件事件 在父组件中，你可以使用`v-on`指令（或其简写`@`）来监听子组件触发的自定义事件。当事件被触发时，父组件中定义的对应方法将被调用，并可以接收来自子组件传递的数据。 **基本用法**： ```vue <template> <div> <ChildComponent @custom-event="handleCustomEvent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(message) { console.log('接收到子组件的信息:', message); } } } </script> ``` 在这个例子中，父组件通过`@custom-event="handleCustomEvent"`监听来自子组件的`custom-event`事件，并定义了`handleCustomEvent`方法来处理接收到的事件和数据。 **监听带有多个参数的事件**： 如果子组件触发的事件带有多个参数，父组件中的处理方法应相应地接收这些参数。 ```vue <template> <div> <ChildComponent @another-event="handleAnotherEvent" /> </div> </template> <script> export default { methods: { handleAnotherEvent(arg1, arg2, arg3) { console.log('接收到的参数:', arg1, arg2, arg3); } } } </script> ``` #### 11.3.4 事件修饰符 Vue提供了几种事件修饰符，用于在监听事件时添加一些特殊的行为。虽然这些修饰符主要是用于原生DOM事件的，但在监听自定义事件时，了解它们也是有益的，因为你可以通过它们获得一些启发，比如在组件内部实现类似的功能。 - `.stop`：阻止事件冒泡 - `.prevent`：阻止默认行为（对自定义事件不适用） - `.capture`：使用事件捕获模式 - `.self`：只当事件在该元素本身（比如不是子元素）触发时触发回调 - `.once`：事件只触发一次 虽然`.prevent`对于自定义事件不适用，但你可以通过其他方式（如检查事件参数或组件状态）来阻止某些行为的发生。 #### 11.3.5 监听组件根元素的原生事件 有时你可能需要监听组件根元素上的原生DOM事件，而不是组件内部通过`$emit`触发的自定义事件。Vue允许你在监听事件时添加`.native`修饰符来实现这一点，但请注意，在Vue 2.x中这是有效的，而在Vue 3.x中，`.native`修饰符已被移除，取而代之的是`$attrs`和`$listeners`的更改，以及`v-on="$listeners"`的使用方式。 **Vue 2.x 示例**： ```vue <!-- 父组件 --> <template> <ChildComponent @click.native="handleClick" /> </template> ``` **Vue 3.x 替代方案**： 在Vue 3中，你应该通过`$attrs`和`$listeners`或直接在子组件模板上监听事件，并将它们通过`$emit`转发给父组件，以保持组件间的解耦。 #### 11.3.6 最佳实践 - **保持组件间的解耦**：尽量避免在父组件中直接操作子组件的内部状态，而是通过事件和props来通信。 - **明确事件命名**：使用清晰、描述性的事件名，以便其他开发者（或未来的你）能够快速理解事件的用途。 - **合理控制事件传播**：根据需要选择是否使用事件修饰符来控制事件的冒泡或捕获行为。 - **考虑事件重用**：如果多个组件需要触发相同的事件，考虑在它们共同的父组件或更高级别的组件中定义该事件及其处理逻辑，以减少代码重复。 - **利用Vuex或Vue 3的Composition API进行状态管理**：对于复杂应用，考虑使用Vuex进行全局状态管理，或在Vue 3中使用Composition API来组织逻辑和状态，以减少组件间的直接通信需求。 通过深入理解并灵活运用Vue的事件系统，你可以构建出更加模块化、可维护和可扩展的Vue.js应用。
上一篇：
11.2.2 数据验证
下一篇：
11.3.1 监听自定义事件
该分类下的相关小册推荐：
Vue面试指南
TypeScript和Vue从入门到精通(三)
TypeScript和Vue从入门到精通(四)
TypeScript和Vue从入门到精通(五)
Vue源码完全解析
VUE组件基础与实战
vue项目构建基础入门与实战
TypeScript和Vue从入门到精通(一)
TypeScript和Vue从入门到精通(二)
Vue.js从入门到精通(二)
Vue.js从入门到精通(一)
移动端开发指南
