Vue深入组件:组件事件详解1
组件事件是子组件向父组件传递信息、触发父组件逻辑的重要方式。与 props 的“父传子”方向相反,组件事件实现了“子传父”的通信,是 Vue 组件间交互的核心机制之一。本章将从事件的触发、监听、声明到校验,全面解析组件事件的使用方式。
触发与监听事件
子组件通过触发自定义事件传递信息,父组件则通过监听事件执行相应逻辑,二者配合实现子到父的通信。
子组件触发事件:$emit
方法
子组件中可通过 $emit
方法触发自定义事件。$emit
的第一个参数是事件名称(字符串),后续参数为事件传递的数据(可选)。
在模板中,可直接在 v-on
(缩写 @
)的处理函数中使用 $emit
:
<!-- MyComponent 子组件 -->
<!-- 点击按钮时触发 someEvent 事件 -->
<button @click="$emit('someEvent')">Click Me</button>
若需在事件中传递数据,可在 $emit
的第一个参数后添加额外参数:
<!-- 触发事件时附带参数 1 -->
<button @click="$emit(