前言
我们在自定义组件上使用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 }
