使用

用过vue的我们应该都知道，v-model可以在组件上使用以实现双向绑定。

<input v-model="searchText" />

// 上面的代码其实是等价于如下这段代码的
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

但是如果我们需要在自定义组件上面使用v-model该如何处理呢？

<!-- CustomInput.vue -->
<script setup>
// 在vue2中我们可以在自定义组件的props中定义model对象：model: {prop: 'value', event: 'input'}，通过emit方法触发input事件即可
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有内置的修饰符，比如.lazy,.trim,.number，只需要使用时v-model.lazy即可，如果我们需要自定义修饰符该如何处理呢？

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

// MyComponent.vue
<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>

多v-model绑定

个人觉得，这个在项目中使用到的场景不多，可以了解一下

// UserName.vue
<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>
<script setup>
defineProps({
  firstName: String,
  lastName: String
})

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

上面自定义了一个组件，我们在父组件中使用一下：

<template>
  <h1>{{ first }} {{ last }}</h1>
  <UserName
    v-model:first-name="first"
    v-model:last-name="last"
  />
</template>

<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'

const first = ref('John')
const last = ref('Doe')
</script>

代码示意图