Vue中如何为Tabs组件的首个Tab子项设置默认激活类

你现在遇到的核心问题是渲染结构错误，再加上Tab子组件的注册逻辑缺失，才导致所有Tab都被标记为激活状态。下面一步步帮你解决：

1. 先修正最关键的渲染结构 #

你当前把<Tabs>放在了v-for循环里，这会让每个变体都生成一个独立的Tabs组件（每个Tabs里只有一个Tab），而每个Tabs的默认激活索引都是0，自然每个Tab都会被加上激活类。正确的结构应该是一个Tabs容器包裹多个Tab子组件：

<div class="tabs-content">
  <!-- 把Tabs放在循环外层，作为容器 -->
  <Tabs>
    <!-- 循环渲染Tab子组件 -->
    <Tab 
      v-for="(variation, index) in product.attributes.variations" 
      :key="index"
      :label="variation.name"
    >
      <!-- 这里放每个Tab对应的内容 -->
    </Tab>
  </Tabs>
</div>

2. 完善Tab子组件的逻辑（你大概率漏掉了这部分） #

Tab子组件需要通过inject获取父组件的Tabs实例，把自己的标签和DOM元素注册到父组件中，这样Tabs才能正确生成标签栏：

<template>
  <div class="tabs__item">
    <slot />
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  },
  inject: ['Tabs'],
  mounted() {
    // 将当前Tab的标签和自身DOM元素注册到父组件的Tabs实例
    this.Tabs.labels.push(this.label);
    this.Tabs.items.push(this.$el);

    // 兜底：如果是第一个注册的Tab，强制激活索引为0
    if (this.Tabs.labels.length === 1) {
      this.Tabs.active = 0;
      this.$parent.setHeight();
      this.$parent.scrollWrapper();
    }
  },
  beforeDestroy() {
    // 销毁时清理数据，避免内存泄漏
    const index = this.Tabs.labels.indexOf(this.label);
    if (index !== -1) {
      this.Tabs.labels.splice(index, 1);
      this.Tabs.items.splice(index, 1);
    }
  }
}
</script>

3. 给Tabs组件加个监听兜底（可选） #

为了避免异步加载数据时标签列表更新导致的激活异常，可以在Tabs组件里加个监听：

// 在Tabs组件的script中添加watch
watch: {
  'Tabs.labels': {
    handler() {
      // 如果当前激活索引超出标签数量，重置为第一个
      if (this.Tabs.active >= this.Tabs.labels.length) {
        this.Tabs.active = 0;
        this.setHeight();
        this.scrollWrapper();
      }
    },
    immediate: true,
    deep: true
  }
}

为什么之前所有Tab都激活？ #

简单来说就是你把Tabs组件重复渲染了N次（N是变体数量），每个Tabs里只有一个Tab，而每个Tabs的默认激活索引都是0，所以每个Tab都满足i === active的条件，自然都被加上了tabs__tab_active类。修正结构后，一个Tabs下多个Tab，只有索引0的Tab会匹配激活条件，就实现了默认首个Tab激活的需求。

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