Vue中如何将v-model通过封装子组件透传给底层generic-input组件

你遇到的问题是封装子组件时未透传v-model对应的prop与事件，同时没有传入预设的转换/过滤方法，以下是可直接运行的实现：

正确的 NumberInput.vue 实现 #

<template>
  <generic-input
    :value="value"
    @input="val => $emit('input', val)"
    :to-object-type="toNumber"
    :filter="numberFilter"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
import GenericInput from './GenericInput.vue'

export default {
  components: { GenericInput },
  props: {
    value: undefined
  },
  methods: {
    // 预设类型转换逻辑，可按业务需求修改
    toNumber(val) {
      return Number(val)
    },
    // 预设过滤逻辑，示例为仅允许非负整数，可按业务需求修改
    numberFilter(val) {
      if (isNaN(val)) return 0
      return Math.floor(Math.max(0, val))
    }
  }
}
</script>

可选属性v-bind="$attrs"和v-on="$listeners"用于自动透传所有未显式声明的prop和事件，比如placeholder、disabled等，无需额外代码适配。

父组件使用方式 #

和直接使用generic-input完全一致，正常绑定v-model即可：

<template>
  <div>
    <number-input v-model="inputValue" />
    <p>当前输入值：{{ inputValue }}</p>
  </div>
</template>
<script>
import NumberInput from './NumberInput.vue'
export default {
  components: { NumberInput },
  data() {
    return {
      inputValue: 0
    }
  }
}
</script>

问题原因说明 #

Vue 2 中v-model的本质是语法糖，等价于:value="绑定变量" + @input="绑定变量 = $event"。你之前的封装没有在父子组件之间传递value属性、也没有转发input事件，导致外层绑定的变量无法接收内部输入的更新，自然不会触发响应式更新。

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