vue 自定义v-model的组件 修饰符无效，需要改怎么做！

Posted 2023-04-16

父组件
<sign-input
v-model.trim="email"
leftIcon="youxiang"
allowClear
:placeholder="$t('login.yourEmailAddress')" />

子组件
....
<input :value="value" @input="$emit('input', $event.target.value)"
@focus="focus" @blur="blur" :placeholder="placeholder"
:type="isPassword ? (changePasswordView ? 'text' : 'password') : type" />
.....

问题：父组件的修饰符并没有起作用！ 需要重新定义v-model指令吗？
如果子组件的input用v-model.trim 配合set也能解决，但我想有没有更好的办法，能扩
展v-model本身的修饰符。

参考技术A Vue.component('sign-input', 
props: ['value'],
template: `
<input :value="value" @input="$emit('input', $event.target.value)" />
`
)
 
        new Vue(
            data()
return a: 1234

        ).$mount('#app')

    <div id="app">
a
<sign-input v-model="a"/>
    </div>

自定义 v-model 之修饰符

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