Vue抽象Field组件中如何动态添加v-model修饰符（非v-if/v-else方案）？

不用重复渲染input，你可以通过手动处理修饰符逻辑来实现。核心思路是在组件内部接收修饰符参数，然后在输入事件中根据修饰符对值进行转换，再同步给父组件。

步骤1：组件定义props接收修饰符 #

在Field组件中，除了modelValue，还要声明modifiers props来接收父组件传递的v-model修饰符：

<script setup>
const props = defineProps({
  modelValue: [String, Number],
  modifiers: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['update:modelValue'])
</script>

步骤2：在输入事件中处理修饰符逻辑 #

监听input的输入事件，根据modifiers里的标识（比如number、trim）对输入值做对应处理，再通过update:modelValue事件传递回去：

<template>
  <input 
    :value="modelValue"
    @input="handleInput"
  />
</template>

<script setup>
// ... 上面的props和emit定义

const handleInput = (e) => {
  let value = e.target.value

  // 处理number修饰符：尝试转为数字，转失败则保留原字符串
  if (props.modifiers.number) {
    value = isNaN(Number(value)) ? value : Number(value)
  }

  // 处理trim修饰符：去除首尾空格
  if (props.modifiers.trim) {
    value = value.trim()
  }

  emit('update:modelValue', value)
}
</script>

步骤3：父组件中使用修饰符 #

和原生input的用法完全一致，直接给v-model加修饰符即可：

<Field v-model.number="age" />
<Field v-model.trim="username" />

这种方式把修饰符的处理逻辑封装在组件内部，不用重复渲染input元素，同时保持了原生v-model修饰符的使用体验。

内容的提问来源于stack exchange，提问作者Greendrake