Vue3 多个 v-model 绑定怎么实现？

Question

仓乃文 · Accepted Answer

一个组件需要同时双向绑定多个数据时，可以用命名 v-model 实现，每个 v-model 对应一个独立的 prop 和 update 事件，避免 props + emit 的冗余写法。

子组件：
```javascript
const firstName = defineModel("firstName");
const lastName = defineModel("lastName");
```

父组件：
```html
<UserForm
  v-model:first-name="form.first"
  v-model:last-name="form.last"
/>
```

传统写法对比：
```javascript
// 传统写法：每个字段都要 props + emit
const props = defineProps(["firstName", "lastName"]);
const emit = defineEmits(["update:firstName", "update:lastName"]);
const updateFirst = (e) => emit("update:firstName", e.target.value);
const updateLast = (e) => emit("update:lastName", e.target.value);

// defineModel 写法：两行搞定
const firstName = defineModel("firstName");
const lastName = defineModel("lastName");
```

补充说明：
- v-model:first-name 自动对应 prop firstName 和事件 update:firstName
- 命名 v-model 的 prop 名采用 camelCase，模板中用 kebab-case
- 适合表单组件、筛选器组件等多字段双向绑定场景
- 每个命名 v-model 可以独立设置默认值和修饰符