Vue.js输入组件组合实现：继承式扩展与自动事件支持需求

嘿，这个需求在Vue里完全可以优雅实现，而且特别贴合Vue组件复用的最佳实践！我给你一步步拆解具体的实现思路和代码示例：

Vue默认会将父组件传递的非Prop属性（包括所有事件绑定，比如@click、@blur）收集到$attrs对象中。只要我们在子组件的模板里，把$attrs绑定到基础组件（BaseInput）上，就能让所有事件自动透传到底层的输入元素，完全不用手动逐个绑定。

如果你的子组件根元素不是BaseInput（比如外层包了<div>），记得在子组件里设置inheritAttrs: false，避免Vue把$attrs属性自动绑定到子组件的根元素上，造成冗余。

这个组件负责处理通用的输入逻辑，同时通过v-bind="$attrs"自动承接所有父组件传来的事件和属性：

<!-- BaseInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    v-bind="$attrs" <!-- 自动绑定所有非Prop的属性、事件 -->
  />
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  }
});

defineEmits(['update:modelValue']);
</script>

这里的v-bind="$attrs"是关键——它会把所有父组件传来的@click、@blur、@keyup，甚至是placeholder、class这类属性，自动绑定到底层的<input>元素上。

子组件专注于数字的格式化与解析逻辑，同时通过v-bind="$attrs"把所有事件透传给BaseInput：

<!-- NumberInput.vue -->
<template>
  <BaseInput
    :modelValue="formattedNumber"
    @update:modelValue="handleInput"
    v-bind="$attrs" <!-- 自动透传所有父组件事件 -->
  />
</template>

<script setup>
import BaseInput from './BaseInput.vue';

// 关闭默认的属性继承（如果子组件根元素不是BaseInput的话）
defineOptions({ inheritAttrs: false });

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  precision: {
    type: Number,
    default: 2 // 默认保留2位小数
  }
});

const emit = defineEmits(['update:modelValue']);

// 把数字格式化为字符串传给BaseInput
const formattedNumber = computed(() => {
  return props.modelValue.toFixed(props.precision);
});

// 解析输入的字符串为数字
const handleInput = (value) => {
  const num = parseFloat(value);
  emit('update:modelValue', isNaN(num) ? 0 : num);
};
</script>

现在你给NumberInput绑定任何事件（比如@click、@focus），都会自动透传到BaseInput的<input>元素上，后续新增事件也完全不用修改这个组件的代码。

和数字组件逻辑类似，专注于货币格式化，同样实现事件自动透传：

<!-- CurrencyInput.vue -->
<template>
  <BaseInput
    :modelValue="formattedCurrency"
    @update:modelValue="handleCurrencyInput"
    v-bind="$attrs" <!-- 自动透传所有事件 -->
    placeholder="$0.00"
  />
</template>

<script setup>
import BaseInput from './BaseInput.vue';

defineOptions({ inheritAttrs: false });

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  currencySymbol: {
    type: String,
    default: '$' // 默认美元符号
  }
});

const emit = defineEmits(['update:modelValue']);

// 格式化货币字符串
const formattedCurrency = computed(() => {
  return `${props.currencySymbol}${props.modelValue.toFixed(2)}`;
});

// 解析输入的货币字符串为数字
const handleCurrencyInput = (value) => {
  // 过滤掉非数字和小数点的字符
  const numStr = value.replace(/[^0-9.]/g, '');
  const num = parseFloat(numStr);
  emit('update:modelValue', isNaN(num) ? 0 : num);
};
</script>

你可以像使用普通<input>一样给这些组件绑定事件，完全不用关心事件是怎么透传的：

<!-- ParentComponent.vue -->
<template>
  <div class="input-group">
    <BaseInput
      v-model="text"
      placeholder="普通文本输入"
      @blur="handleBlur"
      @keyup.enter="handleEnter"
      class="input-style"
    />

    <NumberInput
      v-model="number"
      :precision="3"
      @click="handleNumberClick"
      @focus="handleNumberFocus"
    />

    <CurrencyInput
      v-model="amount"
      currencySymbol="¥"
      @keyup="handleCurrencyKeyup"
    />
  </div>
</template>

<script setup>
import BaseInput from './BaseInput.vue';
import NumberInput from './NumberInput.vue';
import CurrencyInput from './CurrencyInput.vue';

const text = ref('');
const number = ref(123.456);
const amount = ref(789.01);

const handleBlur = () => console.log('基础输入框失去焦点');
const handleEnter = () => console.log('基础输入框按下回车');
const handleNumberClick = () => console.log('数字输入框被点击');
const handleNumberFocus = () => console.log('数字输入框获得焦点');
const handleCurrencyKeyup = () => console.log('货币输入框按键抬起');
</script>

• 基础组件BaseInput负责通用逻辑和事件透传，子组件专注于业务格式化/解析
• 利用$attrs实现事件自动透传，无需手动绑定每个事件，后续新增事件也能自动支持
• 结合inheritAttrs: false避免属性冗余绑定，让代码更干净

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