自定义修饰符 custprop和custprop2，它将 v-model 绑定提供的字符串的变成大写，
- 不带参数 添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件
- 带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"
案例
- components/inputcmp2.vue
<!-- -->
<template>
<input type="text" :value="modelValue || name" @input="inputemit" />
</template>
<script>
export default {
props: {
name: String,
modelValue: String,
// 带有参数自定义修饰符(args+Modifiers)
nameModifiers: {},
// 自定义修饰符，不带参数(modelModifiers)
modelModifiers: {
default: () => ({}),
},
},
methods: {
inputemit(e) {
let value = e.target.value;
console.log("modelModifiers === ", this.modelModifiers, this.nameModifiers);
if (this.modelModifiers.custprop || this.nameModifiers.custprop2) {
value = value.toUpperCase();
}
this.$emit("update:modelValue", value);
this.$emit("update:name", value);
}
},
};
</script>
- demo.vue
<!-- -->
<template>
<inputcmp2 v-model.custprop="inpvalue"/><br>
name: <inputcmp2 v-model:name.custprop2="name" />
</template>
<script>
import { ref } from 'vue'
import inputcmp2 from '/@/components/inputcmp2.vue'
export default {
components: {
inputcmp2
},
setup(){
let inpvalue = ref('abc');
let name = ref('zs');
return {
inpvalue,
name
}
}
}
</script>
