VueJS如何默认自动打开第一个标签页？

看起来你遇到的核心问题是在mounted钩子中无法正确获取到Tab子组件，导致没法默认激活第一个标签页。我来帮你分析原因并给出可行的解决方案：

为什么你的当前方法无效？ #

在Vue中，父组件的mounted钩子执行时，子组件可能还未完成挂载——父组件挂载完成不代表所有子组件都已经渲染完毕。所以你此时获取this.$children得到的是长度为0的数组（也就是你看到的返回0），自然没法设置默认激活的标签页。另外，$children会包含所有子组件，如果你的Tabs里还有其他元素，很容易混入无关组件，导致逻辑出错。

解决方案1：用$nextTick等待子组件挂载完成 #

最简单的临时修复是在mounted中使用$nextTick，它会等待DOM更新完成（也就是所有子组件挂载完毕）后再执行回调：

// Tabs.vue
export default {
  data() {
    return {
      tabs: [],
      activeTabIndex: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 过滤出Tab子组件（避免混入其他子元素）
      this.tabs = this.$children.filter(child => child.$options.name === 'Tab')
      // 激活第一个标签页
      if (this.tabs.length > 0) {
        this.activeTabIndex = 0
        // 这里可以触发Tab的激活逻辑，比如设置active属性
        this.tabs[0].active = true
      }
    })
  }
}

解决方案2：让Tab组件主动向Tabs注册（推荐） #

这是更可靠的组件通信方式，避免依赖$children的不确定性。让每个Tab组件在挂载时主动告知父组件Tabs自己的存在：

在Tab.vue中： #

export default {
  name: 'Tab',
  props: ['title'],
  data() {
    return {
      active: false
    }
  },
  mounted() {
    // 向父组件Tabs注册自己
    if (this.$parent.$options.name === 'Tabs') {
      this.$parent.registerTab(this)
    }
  }
}

在Tabs.vue中： #

export default {
  name: 'Tabs',
  data() {
    return {
      tabs: [],
      activeTab: null
    }
  },
  methods: {
    registerTab(tab) {
      this.tabs.push(tab)
      // 如果是第一个注册的Tab，默认激活它
      if (this.tabs.length === 1) {
        this.setActiveTab(tab)
      }
    },
    setActiveTab(tab) {
      // 先把所有Tab设为未激活
      this.tabs.forEach(t => t.active = false)
      // 激活目标Tab
      tab.active = true
      this.activeTab = tab
    }
  }
}

这种方式不受渲染顺序影响，也能精准控制哪些是Tab组件，是自定义Tabs组件的标准实现思路。

解决方案3：使用$refs精准获取Tab组件 #

如果你在模板中能明确控制Tab的位置，可以给每个Tab加上统一的ref，然后通过$refs获取：

Tabs.vue模板： #

<template>
  <div class="tabs-container">
    <div class="tab-headers">
      <slot name="headers"></slot>
    </div>
    <div class="tab-panels">
      <!-- 给所有Tab面板加上ref -->
      <tab v-for="(item, idx) in tabList" :key="idx" ref="tabPanels" :title="item.title">
        {{ item.content }}
      </tab>
    </div>
  </div>
</template>

Tabs.vue脚本： #

export default {
  data() {
    return {
      tabList: [/* 你的标签页数据 */]
    }
  },
  mounted() {
    this.$nextTick(() => {
      const tabs = this.$refs.tabPanels
      if (tabs && tabs.length > 0) {
        tabs[0].active = true
      }
    })
  }
}

这个方法适合标签页数据是动态生成的场景，能精准获取到所有Tab组件。

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