Vue如何设置active tab（激活标签页）实现选中切换打开效果

标签切换后内容不展示，是因为changeTab方法仅打印了索引，没有更新父组件中存储激活标签索引的响应式变量activeTab。模板中内容区的v-show判断完全依赖activeTab的值，该值不更新，显示状态自然不会变化。

• 补全切换方法的状态更新逻辑
  直接在changeTab方法中，将事件返回的选中索引赋值给activeTab即可：

changeTab(index) {
  console.log('Change activeTab', index)
  // 新增赋值逻辑，更新响应式激活状态
  this.activeTab = index
}

赋值完成后，Vue会自动触发视图更新，v-show匹配到对应索引的内容块就会自动展示。

• 校验Tabs组件内部逻辑
  确保你封装的Tabs组件符合单向数据流规范：
  • 内部通过props接收父组件传入的activeTabIndex，用来给标签头加激活态样式
  • 点击标签时，通过$emit('tab-changed', 对应标签索引)向外抛事件，不要直接在组件内部修改props值

参考Tabs组件核心实现：

<template>
  <div class="tabs-wrap">
    <div class="tabs-header">
      <div
        v-for="(tab, index) in tabs"
        :key="tab.id"
        :class="['tab-item', { 'tab-active': index === activeTabIndex }]"
        @click="$emit('tab-changed', index)"
      >
        {{ tab.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tabs: { type: Array, required: true },
    activeTabIndex: { type: Number, required: true }
  }
}
</script>
<style scoped>
.tab-active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}
</style>

• 可选优化（多标签场景）
  如果后续标签数量增加，不需要逐个写v-show判断的内容块，可以直接用v-for统一渲染内容区：

<div class="tabs-content">
  <div v-for="(tab, index) in tabs" :key="tab.id" v-show="activeTab === index">
    <!-- 对应标签的内容，可根据业务扩展插槽支持自定义内容 -->
    标签{{ index + 1 }}的内容
  </div>
</div>

注意：不要尝试在Tabs组件内部直接修改activeTabIndex的props值，Vue的单向数据流机制会抛出警告，也会导致状态混乱，所有激活状态的更新都要在父组件完成后通过props同步给子组件。

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