Vue 2 中的 v-model和Vue3中的v-model - 指南

你问的是 v-model（不是 v-modal 吧 ），我来帮你梳理一下 Vue2 和 Vue3 的 v-model 区别。

---

Vue 2 中的 v-model

1. 语法

   • v-model 本质上是 语法糖，等价于：

2. 在组件中的用法

   • 默认情况下，v-model 会绑定到 value prop，并监听 input 事件：

     export default {
     props: ['value']
     }

   • 如果想改 prop 名和事件名，需要用 model 选项：

     export default {
     model: {
     prop: 'checked',
     event: 'change'
     },
     props: ['checked']
     }

     父组件就可以写：

---

Vue 3 中的 v-model

1. 语法

   • 仍然是语法糖，但和 Vue2 不同：

     等价于：

2. 在组件中的用法

   • 默认 prop 变成了 modelValue，事件名变成了 update:modelValue：

     export default {
     props: ['modelValue']
     }

3. 多 v-model 支持

   • Vue3 可以在一个组件上用多个 v-model，通过参数区分：

     子组件写法：

     export default {
     props: ['firstName', 'lastName'],
     emits: ['update:firstName', 'update:lastName']
     }

4. 修饰符传递

   • Vue2 的修饰符（如 .trim、.lazy）只能在内置组件里生效；

   • Vue3 可以让自定义组件接收修饰符：

     子组件里通过第二个参数获取：

     export default {
     props: ['modelValue'],
     emits: ['update:modelValue'],
     setup(props, { emit, attrs }) {
     console.log(attrs['v-model-modifiers']); // { trim: true }
     }
     }

---

总结对比

特性	Vue2	Vue3
默认 prop	value	modelValue
默认事件	input	update:modelValue
自定义 prop+事件	model: { prop, event }	直接用 v-model:xxx
多个 v-model	❌ 不支持	✅ 支持
修饰符传递	❌ 不支持（仅限原生表单）	✅ 支持传递到子组件

---