v-model 在 vue 3 中支持参数化绑定,通过自定义字段名(如 v-model:name)实现多状态独立管理,子组件用 defineprops 和 defineemits 或 vue 3.4+ 的 definemodel('name') 响应,无需额外配置。

v-model 在 Vue 3 中支持参数化绑定,本质是把默认的 modelValue 替换为自定义字段名,让一个组件能同时管理多个独立状态,比如姓名、年龄、开关状态等。关键不在“改写 v-model”,而在于约定好 prop 名和事件名。
参数化 v-model 的基本用法
父组件中写 v-model:name="userName",Vue 会自动解析为:
- 传入 prop:
:name="userName" - 监听事件:
@update:name="userName = $event"
子组件只需按这个名称接收 prop 并触发对应事件即可,无需额外配置。
子组件如何响应带参数的 v-model
子组件需明确声明该参数对应的 prop,并在值变更时触发 update:xxx 事件(xxx 就是参数名):
- 用
defineProps(['name'])接收 name 属性 - 用
defineEmits(['update:name'])声明可发射事件 - 在输入、选择等时机调用
emit('update:name', newValue)
例如封装一个用户编辑框,<useredit v-model:name="user.name" v-model:age="user.age"></useredit>,子组件就分别处理 name 和 age 两个 prop 及其更新逻辑。

