vue中子组件向父组件传值最推荐通过$emit触发自定义事件，父组件用@监听；事件名建议短横线命名，支持多参数传递、解构接收及v-model语法糖，需注意拼写一致与执行时机。
Vue 中子组件向父组件传值，最常用也最推荐的方式就是通过自定义事件配合 $emit 实现。核心思路是：子组件内部触发一个自定义事件，并把需要传递的数据作为参数发出；父组件在使用子组件时，用 v-on（或简写 @）监听该事件，接收并处理数据。
子组件中正确使用 $emit
在子组件的逻辑中（比如点击按钮、输入变化、接口返回后），调用 this.$emit('事件名', 数据) 即可触发自定义事件。事件名建议使用短横线命名（如 update-user），避免和原生事件冲突，也更符合 HTML 规范。
- 事件名必须与父组件监听的名称完全一致（区分大小写）
- 可以传一个参数，也可以传多个（第二个及之后的参数会依次被父组件事件处理器接收）
- 不推荐直接修改父组件传来的 prop，应通过 $emit 通知父组件自行更新
父组件监听并接收数据
父组件在引用子组件时，用 @事件名="处理函数" 绑定监听器。处理函数可以是内联语句（简单场景），但更常见的是在 methods 中定义函数，便于复用和维护。
- 如果子组件
$emit('submit', { name: 'Alice', age: 25 })，父组件方法可接收为handleSubmit(data) { console.log(data.name) } - 支持解构接收：
@submit="({ name, age }) => userName = name"（适合简单赋值） - 事件名若含短横线，监听时无需驼峰转换，保持原样即可（Vue 会自动处理）
结合 v-model 的简化写法（Vue 2.2+）
当子组件封装的是表单类控件（如自定义输入框），可让 v-model 生效：子组件内部 $emit('input', newValue)，父组件直接写 v-model="parentValue" 即可双向绑定。
- 本质是语法糖：
v-model等价于:value="parentValue" @input="val => parentValue = val" - Vue 3 中改为
$emit('update:modelValue', value)，配合v-model自动映射 - 如需自定义 prop 名和事件名，可用
v-model:foo="bar"+$emit('update:foo', newVal)
常见误区与调试建议
传值失败往往不是语法错，而是逻辑疏漏。遇到问题可按顺序排查：
- 检查子组件是否真的执行了
$emit（加console.log确认） - 确认事件名拼写一致，且没有在子组件中用
native修饰符误绑到根元素 - 父组件监听的是子组件标签本身，不是子组件内部某个按钮或 div
- 避免在子组件
mounted或created中立即$emit，除非父组件已准备好接收
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
