组件 v-model

首先让我们回忆一下v-model在原生元素上的用法：

<input v-model="searchText" />

在代码背后，模板编译器会对v-model进行更冗长的等价展开。因此上面的代码其实等价于下面这段：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

而当使用在一个组件上时，v-model会被展开为如下的形式：

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

要让这个例子实际工作起来，<CustomInput>组件内部需要做两件事：

将内部原生<input>元素的value attribute 绑定到modelValue prop
当原生的input事件触发时，触发一个携带了新值的update:modelValue自定义事件

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

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

现在v-model可以在这个组件上正常工作了：

<CustomInput v-model="searchText" />

另一种在组件内实现v-model的方式是使用一个可写的，同时具有getter和setter的computed属性。get方法需返回modelValue prop，而set方法需触发相应的事件：

<!-- CustomInput.vue -->
<script setup>
import { computed } from 'vue'

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

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" />
</template>

emit('update:modelValue',value)中参数value，数据类型是任意类型：字符串、数字、布尔值、以及数组、对象等。

v-model 的参数

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

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

在这个例子中，子组件应声明一个title prop，并通过触发update:title事件更新父组件值：

<!-- 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双向绑定。

组件上的每一个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有一些内置的修饰符，例如.trim，.number和.lazy。在某些场景下，你可能想要一个自定义组件的v-model支持自定义的修饰符。

我们来创建一个自定义的修饰符capitalize，它会自动将v-model绑定输入的字符串值第一个字母转为大写：

<MyComponent v-model.capitalize="myText" />

组件的v-model上所添加的修饰符，可以通过modelModifiers prop 在组件内访问到。在下面的组件中，我们声明了modelModifiers这个 prop，它的默认值是一个空对象：

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

defineEmits(['update:modelValue'])

console.log(props.modelModifiers) // { capitalize: true }
</script>

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

注意这里组件的modelModifiers prop 包含了capitalize且其值为true，因为它在模板中的v-model绑定v-model.capitalize="myText"上被使用了。

有了这个 prop，我们就可以检查modelModifiers对象的键，并编写一个处理函数来改变抛出的值。在下面的代码里，我们就是在每次<input />元素触发input事件时将值的首字母大写：

<script setup>
const props = defineProps({
  modelValue: String,
  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>

对于又有参数又有修饰符的v-model绑定，生成的 prop 名将是arg +"Modifiers"。举例来说：

<MyComponent v-model:title.capitalize="myText">

相应的声明应该是：

const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])

console.log(props.titleModifiers) // { capitalize: true }

组件 v-model

v-model 的参数

多个 v-model 绑定

处理v-model修饰符

处理`v-model`修饰符