v-model本质是语法糖,vue 2中等价于:value+@input,vue 3中等价于:modelvalue+@update:modelvalue;核心是父传属性、子发事件,支持自定义prop/event名及多v-model绑定。

理解v-model的本质是第一步
v-model不是魔法,它只是语法糖。在Vue 2中,v-model="value" 等价于 :value="value" @input="value = $event.target.value";在Vue 3中,则等价于 :modelValue="value" @update:modelValue="value = $event"。关键就两点:父组件传一个属性进来,子组件改完后抛一个对应事件出去。
Vue 2写法:用 value + input 最稳妥
子组件需声明 value prop,并监听用户操作触发 input 事件:
- props 中定义
value: { type: String, default: '' } - 模板中绑定
<input :value="value"> - 父组件直接使用
<my-input v-model="msg"></my-input>即可
如果想换名字(比如叫 checked),可用 model: { prop: 'checked', event: 'change' },同时 emit 'change' 事件。
Vue 3写法:统一用 modelValue + update:modelValue
Vue 3废弃了 value/input 的默认约定,改用更语义化的命名:
- props 接收
modelValue(类型按需设,如 String、Number、Object) - 触发更新时调用
this.$emit('update:modelValue', newValue) - 父组件仍写
v-model="data",无需改动
支持多个 v-model:比如同时绑定 v-model:title 和 v-model:status,子组件分别接收 title、status props,并 emit update:title 和 update:status。
进阶技巧让组件更健壮
避免直接修改 props,推荐用计算属性或 data 做中间层:
- 用
computed的get/set封装:get 返回 props 值,set 触发 emit - 对 Object/Array 类型,注意深拷贝再修改,防止意外响应式污染
- 加 prop 校验(如
required: true、validator)提升可维护性 - 配合
v-bind="$attrs"透传原生属性(如 placeholder、disabled),保持表单一致性
不复杂但容易忽略









