在 中使用 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 函数后，像调用普通函数一样使用：
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 无参事件：
emits('cancel') - 带参事件：
emits('submit', { name: 'Alice', age: 28 }) - 参数个数和类型必须严格匹配声明（TypeScript 下会立即提示错误）
父组件监听事件
父组件用 @事件名 绑定处理函数，参数自动接收子组件传来的值：
<childcomponent></childcomponent>- 对应方法如：
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) - 父组件写法：
<childcomponent v-model="value"></childcomponent>
也可用简写语法 defineEmits(['update:modelValue']) 或类型化写法 defineEmits()。
