如何将v-model修饰符转发给Vue子组件

问题场景 #

我写了一个包装原生input的自定义组件MementoField，父组件使用时会传入v-model修饰符（比如.lazy），但不知道怎么把这些修饰符转发给组件内部的input元素，让它和原生input的v-model修饰符表现一致。

父组件示例代码 #

<script setup lang="ts">
import MementoField from './MementoField.vue'
import { ref } from 'vue'

const value = ref("hello, world")
</script>

<template>
  <MementoField v-model="value" />
  <br/>
  <MementoField v-model.lazy="value" />
  <br/>
  <span>Lazy: </span>
  <input v-model.lazy="value" />
</template>

子组件（MementoField.vue）初始代码 #

<script setup lang="ts">
const [model, modifiers] = defineModel<string>({ default: ''})
// 这里不知道怎么把modifiers转发给内部的input

const memento = model.value
</script>

<template>
  <div>
    <div>Initial value: {{ memento }}</div>
    <div>Current value: {{ model }}</div>
    <input v-model="model" @keydown.esc="model = memento">
    <span> (ESC to reset)</span>
  </div>
</template>

解决方案 #

Vue 3的defineModel会返回修饰符对象，但目前没有自动转发所有修饰符到子元素的通用方案，需要针对内置修饰符（.lazy、.trim、.number）手动处理对应的逻辑：

修改后的子组件代码：

<script setup lang="ts">
const [model, modifiers] = defineModel<string>({ default: '' })
const memento = model.value

// 处理输入值的修饰符逻辑
const handleInput = (e: Event) => {
  let inputValue = (e.target as HTMLInputElement).value

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

  // 处理.number修饰符：转换为数字，无效则保留原内容
  if (modifiers.number) {
    const numValue = Number(inputValue)
    inputValue = isNaN(numValue) ? inputValue : numValue
  }

  model.value = inputValue
}

// 根据.lazy修饰符决定监听的事件：lazy用change，否则用input
const inputEvent = modifiers.lazy ? 'change' : 'input'
</script>

<template>
  <div>
    <div>Initial value: {{ memento }}</div>
    <div>Current value: {{ model }}</div>
    <input 
      :value="model" 
      @[inputEvent]="handleInput"
      @keydown.esc="model = memento"
    >
    <span> (ESC to reset)</span>
  </div>
</template>

逻辑说明 #

• .lazy修饰符：通过动态事件绑定，当存在该修饰符时，input监听change事件（失去焦点或按下回车时触发），否则监听input事件（实时触发），和原生v-model.lazy行为一致。
• .trim和.number修饰符：在输入处理函数中手动对输入值做对应转换，再赋值给model，模拟原生修饰符的效果。

目前没有通用方案支持自定义修饰符的自动转发，需要根据自定义修饰符的需求单独编写处理逻辑。

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