Vue3 里的 v-model 怎么绑定多个属性?双向绑定全面进阶实战

大丽酱_2505

大丽酱_2505

2026-05-28

808人浏览

原创

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

vue3 里的 v-model 怎么绑定多个属性?双向绑定全面进阶实战

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 会自动触发对应事件,父组件数据实时同步。

    vue-composition-api-best-practices
    vue-composition-api-best-practices

    Vue 3 组合式 API 与

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    uni-app快速上手
    uni-app快速上手

    共0课时 | 0人学习

    Vue 教程
    Vue 教程

    共42课时 | 17.2万人学习

    Vue3.x 工具篇--十天技能课堂
    Vue3.x 工具篇--十天技能课堂

    共26课时 | 2.5万人学习