Vue配置inheritAttrs: false后class属性仍绑定根元素问题

DevOps 小满

2026-9-3

问题根因

你的代码本身没有配置错误，出现这个现象是Vue 2的固有设计导致的：

Vue 2中inheritAttrs: false选项不作用于class和style属性，这两个属性不管你开不开属性继承，都会默认绑定到组件根节点，也不会被包含在$attrs对象里。
你参考的官方文档示例大概率是Vue 3版本的：Vue 3重构了属性透传逻辑，class和style会被统一收进$attrs，完全受inheritAttrs控制，你现在写的代码放到Vue 3环境里可以直接运行出预期效果。

Vue 2 适配方案

如果暂时不能升级到Vue 3，可以按下面的方式改造，把class绑定到目标span上：

传入的class、style不会出现在$attrs里，需要从组件的$vnode.data上手动读取
把取到的class、style手动绑定到内部的span元素上
根节点div上显式绑定空的class和style，覆盖默认的自动继承绑定

改造后的组件代码如下：

<template>
  <div class="" style="">
    <span v-bind="$attrs" :class="passThroughClass" :style="passThroughStyle">{{this.main}}</span>
    <span v-if="this.extra">({{this.extra}})</span>
  </div>
</template>

<script>
  export default {
    inheritAttrs: false,
    computed: {
      parts() {
        return this.value.replace(/\)$/, '').split('(');
      },
      main() {
        return this.parts[0];
      },
      extra() {
        return this.parts[1];
      },
      passThroughClass() {
        return this.$vnode.data?.class || ''
      },
      passThroughStyle() {
        return this.$vnode.data?.style || ''
      }
    },
    props: {
      value: {
        type: String,
        required: true,
      },
    }
  }
</script>