必须显式声明自定义事件，子组件用defineemits声明后调用emit触发，父组件用@事件名监听；未声明的@click等原生事件会被自动透传到根元素，导致重复执行。
用 defineEmits 声明并触发自定义业务事件，核心就两点：子组件先声明允许发什么事件，再调用 emit 触发；父组件用 @事件名 监听并接收参数。不声明也能发，但会引发意外行为——比如把未声明的 @click 自动绑定到子组件根元素上，造成原生点击和业务逻辑重复执行。
怎么在子组件中声明事件
在 <script setup></script> 中直接调用 defineEmits，传入数组或对象：
- 数组形式（适合简单场景）：
const emit = defineEmits(['submit', 'cancel', 'update:status']) - 对象形式（支持参数校验，推荐用于关键业务事件）：
const emit = defineEmits({ submit: (data) => typeof data === 'object' && data.id })
声明不只是写文档，它决定哪些监听器会被 Vue 当作“自定义事件”处理，哪些会被当作“原生事件透传”落到根元素上。
怎么触发带数据的业务事件
声明后拿到 emit 函数，调用时传入事件名和任意数量的参数：
emit('submit', { orderId: 'ORD-001', amount: 99.9 })-
emit('update:status', 'processing')—— 这种命名会自动匹配v-model:status语法糖 emit('cancel', 'user_closed')
注意：不要在事件名里加 on 前缀（如 onSubmit），Vue 约定事件名全小写、短横线分隔，保持语义清晰。
父组件怎么监听和响应
在使用子组件的模板中，用 @事件名 绑定处理函数：
<orderform></orderform>- 对于
update:xxx类型，可简写为v-model:xxx="xxxValue"，前提是子组件也按规范命名并触发 - 回调函数接收的参数顺序，严格对应
emit调用时传入的顺序，例如emit('submit', a, b)→@submit="(a, b) => {...}"
监听函数里可以直接更新响应式数据，比如 @update:count="count = $event"，这是 Vue 单向数据流下安全更新父状态的标准方式。
为什么必须显式声明 click / input 这类原生事件
Vue 3 移除了 .native 修饰符。如果子组件根元素是 <button></button>，而父组件写了 <child></child>，但子组件没在 emits 中声明 'click'，那这个监听就会被自动绑定到按钮上——结果是原生点击 + 你写的业务逻辑一起执行。
- 想让
@click表示“用户点了业务按钮”，就在emits里声明'click' - 想让它仍是原生点击（比如只做 UI 反馈），就不声明，也不在子组件里
emit('click')
业务事件不是技术点缀，是接口契约。声明清楚，协作才不踩坑。
