<input v-model="searchText" />
//等同于
<input :value="searchText" @input="searchText = $event.target.value" />

<CustomInput v-model="searchText" />
//"update:modelValue" 自定义事件
<CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" />

v-model 的参数

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：

<MyComponent v-model:title="bookTitle" />

<!-- MyComponent.vue --> 
<script setup> 
defineProps(['title']) 
defineEmits(['update:title']) 
</script> 
<template> 
<input type="text" :value="title" @input="$emit('update:title',$event.target.value)" /> 
</template>

多个 v-model 绑定​

组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项：

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

<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

处理 v-model 修饰符

组件的 v-model 上所添加的修饰符，可以通过 modelModifiers prop 在组件内访问到。 eg：创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：

//...
<MyComponent v-model.capitalize="myText" />
//...
<script setup>
const props = defineProps({
  modelValue: String,
  //在组件内可以访问到`v-model` 上所添加的修饰符 // { capitalize: true }
  modelModifiers: { default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>