父组件监听子组件事件需用v-on绑定子组件emit的自定义事件，关键在命名（模板中短横线、子组件驼峰）、声明（emits显式列出）和传参（一一对应）三者对齐，且支持.once、.stop等修饰符。
父组件监听子组件事件，核心就是用 v-on（或简写 @）绑定子组件通过 $emit 或 defineEmits 触发的自定义事件。关键不在“怎么写”，而在“命名、声明、传参”三个环节是否对齐。
事件名要大小写匹配，模板里用短横线
子组件中触发的是驼峰式事件名，比如 updateUser 或 deleteItem；但在父组件模板中监听时，必须转成短横线格式：@update-user、@delete-item。这是 Vue 的强制转换规则，不是可选项。
- 子组件内：
emit('updateUser', { id: 1, name: 'Alice' }) - 父组件模板：
<userform></userform> - 如果写成
@updateUser，监听会失效，控制台无报错但函数不执行
Vue 3 推荐显式声明 emits
在子组件中用 emits 选项或 defineEmits 明确列出所有可能抛出的事件，不只是为了类型安全，更是避免事件被意外透传到根元素上。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 选项式写法：
emits: ['submit', 'cancel', 'input-change'] - 组合式写法：
const emit = defineEmits(['submit', 'cancel']) - 未声明的事件（如
$emit('click')）会被归入$attrs，若子组件根元素是<button></button>，就可能造成原生 click 被触发两次
参数传递和接收要一一对应
子组件调用 emit 时传多少个参数，父组件的事件处理函数就按顺序接收多少个。不需要解构，也不需要包装成对象（除非你主动这么做）。
立即学习“前端免费学习笔记（深入）”；
- 子组件：
emit('item-added', item.id, item.title, Date.now()) - 父组件方法：
function onItemAdded(id, title, timestamp) { console.log(id, title) } - 模板绑定：
@item-added="onItemAdded" - 也可用内联写法：
@item-added="(id, title) => addItem(id, title)"
修饰符和一次性监听很实用
v-on 支持常见修饰符，能减少样板逻辑。
-
@save.once="handleSave"：事件只响应第一次触发 -
@change.stop.prevent="handleChange"：阻止冒泡和默认行为（适合表单控件封装场景） - 注意：
.native在 Vue 3 中已废弃，不用再写@click.native，直接@click即可监听原生事件
