持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

前言

我们在自定义组件上使用v-model的时候，考虑到有时候想对输入的东西进行格式化处理，为此vue官方也为我们提供了一些，比较常用的修饰符，例如 .trim，.number 和 .lazy。这些我们之前的章节有提到过，有兴趣的可以往期翻一翻。

但是对于有些特别业务的场景，官方所提供的修饰符并不能满足我们的需要。而官方也考虑到这种情况，为我们提供了自定义修饰符的功能。

下面我们就来看一看如果自定义v-model的修饰符吧。

自定义修饰符

首先，先创建一个名为capitalize的v-model的自定义修饰符，我们想这个修饰符，把我们输入的名字的首字母自动转换为大写：

<Title v-model.capitalize="myTitle" />

如上，我们在组件时声明创建了一个capitalize的修饰符，我们可以通过 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 修饰符，所以会打印 { capitalize: true }。

既然，能知道修饰符的使用情况，我们就可以进行判断，并在每次派发 update:modelValue 事件的时候，进行相应的格式化操作。也就是，在每次input标签触发input事件的时候，进行名字首字母的大写。

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

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

function capitalizeInput(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.split(' ')
                 .map(item =>  item.charAt(0).toLocaleUpperCase() + item.slice(1))
                 .join(' ')
  }
  emit('update:modelValue', value)
}
</script>

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

这样，我们就完成了首字母大写修饰符的功能了。

当我们给v-model绑定参数的时候，子组件声明的prop形式为：arg + "Modifiers"。

<Title v-model:text.capitalize="myTitle">

-------------------------

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

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