如何阻止Vue透传属性作用于组件容器，仅作用于内部input？

问题核心是Vue3默认会把透传属性自动挂载到组件的根元素（即你的外层<div class="form-checkbox">），再加上你手动在input上绑定了$attrs，导致id等属性重复出现在两个元素上。

只需两步即可解决：

• 禁用根元素自动继承透传属性的行为
• 保持手动将透传属性绑定到目标input元素

修改组件TS代码 #

在defineComponent选项中添加inheritAttrs: false，阻止Vue自动把透传属性加到根元素上：

export default defineComponent({
  // 新增该行，禁用根元素自动继承透传属性
  inheritAttrs: false,
  props: {
    legend: {
      type: String,
      default: ''
    },
    legendSuffix: {
      type: String,
      default: ''
    },
    helperText: { type: String, default: '' },
    label: { type: String, default: '' },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },

  emits: ['error', 'input-event', 'mounted'],

  setup(props, { emit }) {
    const checkboxRef = ref();
    const inputVal = ref();
    const uid = ref(uniqueId());

    watch(
      () => props.modelValue,
      () => {
        inputVal.value = String(props.modelValue);
      },
      { immediate: true }
    );

    const onInput = (event: CustomEvent): void => {
      emit('input-event', event);
    };

    onMounted(() => emit('mounted', unref(checkboxRef)));

    return {
      checkboxRef,
      inputVal,
      uid,
      onInput
    };
  }
});

模板代码无需修改 #

你的模板已正确将$attrs绑定到input元素，现在透传属性只会作用于此：

<template>
  <div class="form-checkbox">
    <v-label
      v-if="legend"
      :suffix="legendSuffix"
      :for="$attrs.id || uid"
      :helper="helperText"
    >
      {{ legend }}
    </v-label>

    <div class="form-input__wrapper">
      <input
        :id="$attrs.id || uid"
        ref="checkboxRef"
        type="checkbox"
        v-bind="$attrs"
        v-model="inputVal"
        @input="onInput"
      />

      <label :for="$attrs.id || uid">{{ label }}</label>
    </div>

  </div>
</template>

效果验证 #

当你使用组件时：

<v-checkbox
  id="test"
  :label="test"
/>

最终渲染后，id="test"只会出现在内部的<input>元素上，外层根<div>不会继承该属性，同时<label>的for属性依然能正确关联到input的id，无任何冲突问题。

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