vue 3 中 v-model 支持多属性绑定,3.4+ 推荐用 definemodel('字段名') 简化双向绑定;旧版需手动声明 props/emits 并触发 update:xxx 事件;修饰符通过 modifiers 配置实现,命名须小写驼峰。

v-model 在 Vue 3 中支持同时绑定多个属性,不再局限于单一的 modelValue。核心思路是:用参数指定绑定字段名,子组件声明对应 prop 并触发 update:xxx 事件;从 Vue 3.4 起,defineModel() 宏让写法更简洁、语义更清晰。
多参数 v-model 的标准写法(推荐 Vue 3.4+)
父组件直接使用 v-model:字段名 语法,子组件用 defineModel('字段名') 声明即可实现双向绑定:
- 父组件:
<userinfoform v-model:firstname="user.name" v-model:email="user.email" v-model:age="user.age"></userinfoform> - 子组件(
UserInfoForm.vue):const firstName = defineModel('firstName')<br>const email = defineModel('email')<br>const age = defineModel('age', { type: Number })每个
defineModel()返回一个可读写的 ref,修改其.value会自动触发对应事件,父组件数据实时同步。

