《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model

v-model 与 value 的关系

当你在一个原生 <input> 上使用 v-model 时，Vue 会将其展开为以下代码：

html

预览

1<!-- 你写的代码 -->
2<input v-model="message">
3
4<!-- Vue 展开后的代码 -->
5<input :value="message" @input="message = $event.target.value">

可以看到，v-model 自动利用了 value 属性来展示数据，并 input 事件来更新数据。

Vue 2 与 Vue 3 的核心区别

1. 响应式原理的变革 (根本原因)

这是导致所有行为差异的根源。

• Vue 2: 使用 Object.defineProperty。它只能劫持对象的已有属性，无法检测到对象属性的动态添加或删除5。
• Vue 3: 使用 Proxy。它代理整个对象，可以检测到对象属性的任意变化（增、删、改）25。

2. 组件上 v-model 的默认行为

这是你在开发中感受最明显的区别，尤其是在封装自定义组件时。

表格

代码对比：

• Vue 2 中的组件使用

  html

  预览

  1<!-- 父组件 -->
  2<MyComponent v-model="title" />
  3
  4<!-- MyComponent 内部 -->
  5<template>
  6  <!-- 接收 value，触发 input -->
  7  <input :value="value" @input="$emit('input', $event.target.value)" />
  8</template>
  9<script>
  10export default {
  11  props: ['value'] // 默认接收 value
  12}
  13</script>
  

• Vue 3 中的组件使用

  html

  预览

  1<!-- 父组件 -->
  2<MyComponent v-model="title" />
  3
  4<!-- MyComponent 内部 -->
  5<template>
  6  <!-- 接收 modelValue，触发 update:modelValue -->
  7  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  8</template>
  9<script setup>
  10defineProps(['modelValue']) // 默认接收 modelValue
  11</script>
  

3. v-model 修饰符与多绑定

Vue 3 的 v-model 变得更加强大和灵活。

• 多个 v-model：Vue 3 允许你在同一个组件上绑定多个 v-model，通过参数名区分14。

  html

  预览

  1<!-- Vue 3 语法 -->
  2<UserEditor 
  3  v-model:name="userName" 
  4  v-model:age="userAge"
  5/>
  

  这在 Vue 2 中是无法直接实现的，通常需要配合 .sync 修饰符来模拟。

• 自定义修饰符：Vue 3 支持更灵活的修饰符扩展2。

4. 在原生元素上的表现

对于原生的 <input>、<textarea>、<select> 等元素，v-model 的用法在 Vue 2 和 Vue 3 中基本一致，都用于简化双向绑定的代码。主要区别体现在自定义组件的封装上。

总结与迁移建议

1. 核心变化：Vue 3 将组件 v-model 的默认 prop 从 value 改为了 modelValue，事件从 input 改为了 update:modelValue。
2. 迁移注意：当你将 Vue 2 项目升级到 Vue 3 时，所有自定义表单组件如果依赖默认的 v-model 行为，都需要将 props 中的 value 改为 modelValue，并将 $emit('input') 改为 $emit('update:modelValue')1。
3. 兼容写法：如果你在 Vue 3 中需要兼容旧的组件库（如 Ant Design Vue），它们可能仍然使用 value prop，这时你需要显式地使用 v-model:value 来绑定，而不是简写的 v-model3。