Vue 3 中 v-model 在自定义组件上的正确用法与常见陷阱
在 Vue 3 项目里,很多人在封装表单组件时都会用 v-model 来传递值,但自定义组件上的 v-model 和原生表单元素上的行为并不完全一样。特别是从 Vue 2 迁移过来,或者在组合式 API 里混用 defineModel 和手动 emit 时,经常会遇到“父组件值改了子组件没更新”“子组件输入父组件不同步”“多个 v-model 绑定时命名混乱”等问题。这些问题通常源于对 v-model 编译结果、modelValue 命名规则以及 update: 事件触发机制理解不透彻。下面从实际代码出发,梳理自定义组件上 v-model 的正确写法,以及一些容易踩坑的细节。