Vue 3 自定义表单组件应通过 v-model（即 modelValue prop + update:modelValue 事件）实现父子状态同步，遵循单向数据流；支持命名 v-model、对象深拷贝更新、手动保存模式及 Vue 3.4+ defineModel 宏。

Vue 3 中自定义表单组件向父组件同步修改状态，核心是遵循「单向数据流」原则：子组件不直接改 props，而是通过事件把新值“通知”给父组件，由父组件负责更新源数据。最自然、最推荐的方式是使用 v-model 机制，它本质是 :modelValue + @update:modelValue 的语法糖，语义清晰、写法简洁、官方强支持。

用 v-model 实现双向绑定（推荐）

这是 Vue 3 表单类组件的标准做法，适用于输入框、开关、下拉选择等需要实时响应的场景。

• 父组件直接写 <MyInput v-model="inputValue" />，无需额外监听事件
• 子组件声明 modelValue prop，并 emit update:modelValue 事件
• 模板中绑定 :value="modelValue" 并在输入时触发 $emit('update:modelValue', $event.target.value)
• 如需支持多个绑定（比如同时绑 value 和 checked），可用命名 v-model：v-model:value 和 v-model:checked，子组件对应接收 value、checked prop 并 emit update:value、update:checked

处理对象或嵌套数据的更新

当传入的是一个用户对象（如 { name: '张三', profile: { city: '上海' } }），不能直接修改 props，否则会触发警告且难以追踪变更来源。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 子组件内部基于 props 创建新对象（浅拷贝即可，如 { ...props.user, age: 25 }）
• 嵌套属性要单独拷贝，例如改地址：{ ...props.user, profile: { ...props.user.profile, city: '北京' } }
• 通过自定义事件（如 emit('update-user', newUser)）将整个新对象传出
• 父组件监听该事件，直接赋值更新响应式数据：user = newUser

需要手动控制同步时机的场景

比如编辑表单有「取消」「保存」按钮，不希望每次输入都同步，而是提交后才更新父组件。

立即学习“前端免费学习笔记（深入）”；

• 子组件用 ref 或 reactive 创建本地副本，初始值为 props.data
• 用 watch 监听父组件传来的 props 变化，及时更新本地副本（避免父组件重置时子组件不同步）
• 点击「保存」时，调用 emit('save', localData.value)，父组件收到后执行实际更新
• 「取消」则重置本地副本为当前 props 值，不触发 emit

小技巧：defineModel（Vue 3.4+）

如果你使用的是 Vue 3.4 或更高版本，可以启用实验性编译宏 defineModel，让代码更简洁：

• 子组件中直接写 const model = defineModel()，它会自动关联 modelValue prop 和 update:modelValue 事件
• model.value 可读可写，修改即自动 emit，无需手写 computed 或 watch
• 注意：需在 compilerOptions 中开启 defineModel: true，且目前仍属实验特性，生产环境建议评估稳定性