Vue 3 v-model 怎么自定义参数实现组件双向绑定

胖浩大大_3895

胖浩大大_3895

2026-10-24

685人浏览

原创

v-model 在 vue 3 中支持参数化绑定,通过自定义字段名(如 v-model:name)实现多状态独立管理,子组件用 defineprops 和 defineemits 或 vue 3.4+ 的 definemodel('name') 响应,无需额外配置。

vue 3 v-model 怎么自定义参数实现组件双向绑定

v-model 在 Vue 3 中支持参数化绑定,本质是把默认的 modelValue 替换为自定义字段名,让一个组件能同时管理多个独立状态,比如姓名、年龄、开关状态等。关键不在“改写 v-model”,而在于约定好 prop 名和事件名。

参数化 v-model 的基本用法

父组件中写 v-model:name="userName",Vue 会自动解析为:

  • 传入 prop::name="userName"
  • 监听事件:@update:name="userName = $event"

子组件只需按这个名称接收 prop 并触发对应事件即可,无需额外配置。

子组件如何响应带参数的 v-model

子组件需明确声明该参数对应的 prop,并在值变更时触发 update:xxx 事件(xxx 就是参数名):

  • 用 defineProps(['name']) 接收 name 属性
  • 用 defineEmits(['update:name']) 声明可发射事件
  • 在输入、选择等时机调用 emit('update:name', newValue)

例如封装一个用户编辑框,<useredit v-model:name="user.name" v-model:age="user.age"></useredit>,子组件就分别处理 name 和 age 两个 prop 及其更新逻辑。

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

Vue 3 组合式 API 与

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习