vue3的modelModifiers用法及原理

在 Vue 3 中，modelModifiers 是一个用于自定义 v-model 指令的修饰符的属性。它允许你在自定义组件中使用 v-model 指令时，对输入值进行额外的处理和修饰。

原理上，modelModifiers 的作用是将修饰符传递给自定义组件，并且可以在组件内部通过 $emit(‘update:modelValue’, modifiedValue) 来触发更新当前绑定的值。

下面是一个简单的示例，演示了如何在 Vue 3 中使用 modelModifiers：

<template>
  <custom-input v-model.trim="inputValue" custom-modifier></custom-input>
</template>

<script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  setup() {
    const inputValue = ref('');
    
    return {
      inputValue,
    };
  },
};
</script>

在这个示例中，我们在父组件中使用了一个自定义的组件 CustomInput，并且使用了 v-model.trim 修饰符。v-model.trim 会自动去除输入值的首尾空格，并将处理后的值传递给组件。

在自定义组件 CustomInput 中，我们可以通过 modelModifiers 属性来接收修饰符，并在必要的时候对输入值进行处理。下面是 CustomInput 组件的定义：

<template>
  <input 
    :value="modelValue" 
    @input="onInput($event.target.value)"
  >
</template>

<script>
import { computed } from 'vue';

export default {
  props: {
    modelValue: String,
    modelModifiers: Object,
  },
  emits: ['update:modelValue'],
  methods: {
    onInput(value) {
      let modifiedValue = value;
      if (this.modelModifiers && this.modelModifiers.trim) {
        modifiedValue = value.trim();
      }
      this.$emit('update:modelValue', modifiedValue);
    },
  },
  computed: {
    inputValue: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.onInput(value);
      },
    },
  },
};
</script>

在 CustomInput 组件中，我们定义了 modelValue 作为输入值，并且接收了 modelModifiers 作为修饰符。在 onInput 方法中，我们根据修饰符对输入值进行了处理，并通过 $emit(‘update:modelValue’, modifiedValue) 来通知父组件更新绑定的值。

在父组件中，我们可以通过 v-model.trim 修饰符来指定对输入值进行 trim 处理，而在子组件中，我们通过 modelModifiers 来获取修饰符，并对输入值进行相应的处理。

总之，modelModifiers 可以帮助你在自定义组件中使用 v-model 指令时，对输入值进行额外的处理和修饰，从而更好地满足自定义组件的需求。