#Vue 组件 v-model

#1. 面试题

Q: 如何在自定义组件上使用 v-model？Vue 2 和 Vue 3 有什么区别？

#2. 核心解答

v-model 是 Vue 提供的双向绑定指令。本质上是 props + emit 的语法糖。

#(1) Vue 2 实现

在 Vue 2 中，默认绑定 value prop 和 input 事件。

• 用法：<Comp v-model="text" />
• 组件内实现：

  props: ['value'],
  methods: {
    update(val) { this.$emit('input', val) }
  }
• 多个绑定：必须使用 .sync 修饰符 (:title.sync="title")。

#(2) Vue 3 实现 (重大变更)

Vue 3 将 v-model 和 .sync 合并了，统一了 API。

• 默认 Prop：modelValue (不再是 value)。
• 默认 Event：update:modelValue (不再是 input)。
• 用法：<Comp v-model="text" />
• 组件内实现：

  defineProps(['modelValue'])
  defineEmits(['update:modelValue'])

#(3) Vue 3 多个 v-model

Vue 3 支持参数化 v-model，轻松实现多个双向绑定。

<UserName
  v-model:first="firstName"
  v-model:last="lastName"
/>

• 对应 Prop: first, last
• 对应 Event: update:first, update:last

#(4) 自定义修饰符

Vue 3 支持自定义修饰符（如 v-model.capitalize）。 组件会接收到一个 modelModifiers prop，包含 { capitalize: true }，便于组件内部进行数据格式化。

#3. 总结

• Vue2: value + input，多值需用 .sync。
• Vue3: modelValue + update:modelValue，原生支持多值。