Vue 3中如何忽略特定属性？解决tailwind-merge类重复问题

问题核心是Vue默认会自动将useAttrs()中的class继承到组件根元素，加上我们手动通过:class绑定处理后的class，导致样式类重复。要在不使用props的前提下解决，只需关闭自动继承并手动处理属性绑定：

解决方案步骤 #

• 设置inheritAttrs: false，关闭Vue的默认属性自动继承行为
• 从attrs中分离出class属性，单独用twMerge合并
• 将剩余的属性手动绑定到动态组件上，保证其他属性（如for、id等）正常注入

修改后的代码示例 #

<script setup lang="ts">
defineOptions({
  name: "FormInputLabel",
  inheritAttrs: false, // 关闭自动继承，避免class重复
});

const { label = "", tag = "label" } = defineProps<{
  label?: string;
  tag?: "label" | "span";
}>();

const attrs = useAttrs();
// 分离class和其他属性
const { class: classAttrs, ...restAttrs } = attrs;
</script>

<template>
  <component
    :is="tag"
    v-bind="restAttrs" <!-- 绑定除class外的所有属性 -->
    :class="twMerge('font-medium text-base', classAttrs)" <!-- 合并默认class和父组件传入的class -->
  >
    <slot>
      {{ label }}
    </slot>
  </component>
</template>

补充说明 #

• 若需要处理条件类或多个class集合，可结合clsx使用：twMerge(clsx('font-medium text-base', { 'text-red-500': isError }, classAttrs))
• inheritAttrs: false仅关闭根元素的自动属性注入，手动绑定restAttrs后，其他属性仍能正常作用于组件

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