例如，在 <Text /> 组件中给每一个输入的英文单词首字母进行大写转换功能。
1️⃣ 子组件：定义 prop 和 Modifiers：
const props = defineProps({
value: String,
valueModifiers: {
default: () => ({
capitalize: false
})
}
});
Modifiers 就是修饰符键，其值是一个布尔类型，判断是否传入了修饰符，即是否开启修饰符功能，有开启就相应地对 prop（value）做前置工作，如首字母大写转换。
Modifiers 要符合 xxxModifiers 的格式，前面的符号串和 v-model 双向绑定的 prop 对应。
2️⃣ 子组件：定义 emits：
const emits = defineEmits(["update:value"]);
emits 自定义事件向父组件传递子组件修改过后的数据，父组件 v-model 绑定子组件的 prop（value），实现双向绑定。
3️⃣ 子组件：修饰符功能：
function emitValue(e: any) {
let value = e.target.value;
if (props.valueModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1);
}
emits("update:value", value);
}
判断 valueModifiers 是否使用了修饰符，使用了修饰符就转换 prop（value）单词首字母为大写。
4️⃣ 子组件：组件模板：
<template>
<input type="text" :value="value" @input="emitValue" />
</template>
5️⃣ 父组件：使用组件：
<template>
<Text v-model:text.capitalize="state" />
</template>
实现效果：
<Text /> 组件完整代码：
<script setup lang="ts">
const props = defineProps({
value: String,
valueModifiers: {
default: () => ({
capitalize: false
})
}
});
const emits = defineEmits(["update:value"]);
function emitValue(e: any) {
let value = e.target.value;
if (props.valueModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1);
}
emits("update:value", value);
}
</script>
<template>
<input type="text" :value="value" @input="emitValue" />
</template>