17、Vue3 v-model自定义修饰符

自定义修饰符 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>