v-model 是 vue 中父子组件双向绑定的语法糖，vue 3 默认使用 modelvalue prop 和 update:modelvalue 事件，vue 2 使用 value prop 和 input 事件；支持自定义字段（如 v-model:searchtext）和 vue 3.4+ 的 definemodel 宏简化写法。

v-model 在 Vue 中是实现父子组件双向绑定最简洁的方式，但它不是“自动生效”的魔法，而是有明确约定的语法糖。核心在于：父组件用 v-model 传值并监听更新，子组件按约定接收 prop、触发对应事件。

Vue 3 的标准写法：modelValue + update:modelValue

这是 Vue 3 默认的 v-model 行为，无需额外配置。

• 父组件直接写 <childcomponent v-model="data"></childcomponent>，等价于：
  <childcomponent :modelvalue="data"> data = val" /></childcomponent>
• 子组件需声明接收 modelValue prop，并在需要同步数据时调用 emit('update:modelValue', newValue)
• 通常配合 ref 和 watch 使用：用本地 ref 存初始值，watch 它的变化再 emit 回去

Vue 2 的写法：value + input 事件

Vue 2 的 v-model 默认绑定的是 value prop 和 input 事件。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

• 父组件：<childcomponent v-model="data"></childcomponent> 展开后是：
  <childcomponent :value="data"> data = val" /></childcomponent>
• 子组件必须定义 props: ['value']，并在输入变化时执行 this.$emit('input', newValue)
• 注意不能直接修改 props，要通过 emit 通知父组件更新

自定义 v-model 绑定字段（Vue 3 支持）

如果不想用默认的 modelValue，比如想绑定 checked 或 searchText，可以参数化：

• 父组件写：<searchinput v-model:searchtext="query"></searchinput>
• 子组件接收：defineProps({ searchText: String })
• 触发更新：emit('update:searchText', newValue)
• 这样就能在一个组件上同时支持多个 v-model，互不干扰

更简洁的写法：defineModel（Vue 3.4+ 推荐）

Vue 3.4 引入了 defineModel 宏，大幅简化代码：

• 子组件中直接写：const model = defineModel()，它会自动关联 modelValue prop 和 update:modelValue 事件
• 后续可像普通 ref 一样使用：model.value = '新值'，自动触发更新
• 支持类型标注和默认值，例如：const model = defineModel({ type: String, default: '' })

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！