自定义 v-model 之修饰符

Posted 2023-03-26 Himmelbleu

例如，在 <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>