在 中使用 defineEmits 派发事件需三步:声明事件、获取 emits 函数、调用传参;支持数组或类型语法(不可混用),配合 @事件名 在父组件监听,且支持 v-model 的 update:modelValue 事件。

在 <script setup></script> 中使用 defineEmits 向父组件派发事件,核心是三步:声明允许触发的事件、获取 emit 函数、在逻辑中调用它传参。它替代了 Vue 2 的 this.$emit,且无需导入,是编译器宏。
声明事件并获取 emit 函数
直接调用 defineEmits,传入数组或类型对象,返回一个可调用的函数(习惯命名为 emits):
- 数组语法(适合简单场景):
const emits = defineEmits(['submit', 'cancel']) - 类型语法(推荐,尤其搭配 TypeScript):
const emits = defineEmits()
注意:两种写法不能混用,否则编译报错。
在子组件中触发事件
拿到 emits 函数后,像调用普通函数一样使用:
- 无参事件:
emits('cancel') - 带参事件:
emits('submit', { name: 'Alice', age: 28 }) - 参数个数和类型必须严格匹配声明(TypeScript 下会立即提示错误)
父组件监听事件
父组件用 @事件名 绑定处理函数,参数自动接收子组件传来的值:
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用,使用 Element Plus 组件(如 el-button、el-input、el-form、el-table 等)。
- 对应方法如:
const onSubmit = (data: { name: string; age: number }) => { ... }
事件名大小写需完全一致,不支持驼峰自动转短横线(如 myEvent 不等于 @my-event)。
配合 v-model 的常见写法
若子组件要支持 v-model,本质是触发 update:modelValue 事件:
- 声明:
const emits = defineEmits(['update:modelValue']) - 触发:
emits('update:modelValue', newValue) - 父组件写法:
也可用简写语法 defineEmits(['update:modelValue']) 或类型化写法 defineEmits()。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!









