Vue 2 中的 v-model和Vue3中的v-model - 指南
你问的是 v-model
(不是 v-modal
吧 ),我来帮你梳理一下 Vue2 和 Vue3 的 v-model
区别。
Vue 2 中的 v-model
语法
v-model
本质上是 语法糖,等价于:
在组件中的用法
默认情况下,
v-model
会绑定到value
prop,并监听input
事件:export default { props: ['value'] }
如果想改 prop 名和事件名,需要用
model
选项:export default { model: { prop: 'checked', event: 'change' }, props: ['checked'] }
父组件就可以写:
Vue 3 中的 v-model
语法
仍然是语法糖,但和 Vue2 不同:
等价于:
在组件中的用法
默认 prop 变成了
modelValue
,事件名变成了update:modelValue
:export default { props: ['modelValue'] }
多
v-model
支持Vue3 可以在一个组件上用多个
v-model
,通过参数区分:子组件写法:
export default { props: ['firstName', 'lastName'], emits: ['update:firstName', 'update:lastName'] }
修饰符传递
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 | ❌ 不支持 | ✅ 支持 |
修饰符传递 | ❌ 不支持(仅限原生表单) | ✅ 支持传递到子组件 |