Vue 3 支持命名式 v-model 多重绑定，父组件用 v-model:xxx 绑定字段，子组件需声明对应 prop 和 update:xxx 事件，并手动处理类型转换与修饰符逻辑。

v-model 在 Vue 3 单文件组件中支持多重绑定，不再局限于一个 modelValue，而是通过命名式 v-model 实现多个字段的独立双向同步——关键在于 prop 名称与事件名的约定匹配。

多字段 v-model 的写法（父组件）

直接在组件标签上使用多个 v-model:xxx 语法：

• <userform v-model:firstname="user.name" v-model:email="user.email" v-model:age="user.age"></userform>
• 每个 v-model:xxx 对应子组件中一个名为 xxx 的 prop，以及一个名为 update:xxx 的 emit 事件
• 不需要额外写 :xxx 和 @update:xxx，v-model 会自动翻译成这两部分

子组件需满足的两个条件

以 UserForm.vue 为例：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 用 defineProps 声明对应字段的 props，比如 firstName: String、email: String、age: Number
• 用 defineEmits 明确声明要触发的更新事件：['update:firstName', 'update:email', 'update:age']
• 模板中每个输入框分别绑定对应 prop，并在输入时 emit 对应事件：
  <input :value="firstName">
<input :value="email">
<input :value="age" number>

注意类型与修饰符兼容性

多重 v-model 不自动继承 .number 或 .trim 等修饰符，如需数字转换或去空格，必须在子组件内部手动处理：

立即学习“前端免费学习笔记（深入）”；

• 例如 age 字段想转数字，不能只写 v-model.number:age，而要在 emit 前做 Number($event.target.value)
• email 字段想自动 trim，就写 $emit('update:email', $event.target.value.trim())
• 修饰符本身会被传入 modelModifiers prop（仅对默认 modelValue 有效），命名式 v-model 不提供内置 modifiers 支持，需自行设计逻辑

TS 类型提示更清晰

使用 TypeScript 时，可以为 props 和 emits 写明确类型，提升开发体验：

• defineProps()
• defineEmits()