v-model 参数的用法

面试速答（30 秒版 TL;DR）

• Vue 3 支持 v-model:xxx：一个组件可以暴露多个 v-model。
• 规则：v-model:foo="x" 对应子组件 foo prop + update:foo 事件。
• Vue 2 没有 v-model:xxx，常用 .sync 或约定多个 props + emit 来实现类似效果。

---

基本用法（Vue 3）

父组件：

<UserForm v-model:name="name" v-model:age="age" />

子组件：

<script setup lang="ts">
const props = defineProps<{
  name: string;
  age: number;
}>();

const emit = defineEmits<{
  (e: 'update:name', v: string): void;
  (e: 'update:age', v: number): void;
}>();

function updateName(v: string) {
  emit('update:name', v);
}

function updateAge(v: number) {
  emit('update:age', v);
}
</script>

---

默认 v-model（不带参数）对应什么？

• v-model="x" 对应 modelValue + update:modelValue。
• v-model:foo="x" 对应 foo + update:foo。

---

常见追问：和 .sync 的关系

• Vue 2 常见：:title.sync="title" 本质也是 :title="title" @update:title="title = $event" 这类语法糖。
• Vue 3 推荐：用 v-model:xxx 更统一。