Vue 3：在同一组件的多个实例间切换标签页

问题根源 #

你当前的代码只渲染了一个<component>节点，切换标签时只是复用同一个组件实例，而非创建新实例。要实现每个标签对应独立的组件实例，需要为每个标签单独渲染组件，并通过状态控制显示/隐藏。

修改后的完整代码 #

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import _ from "lodash";
import ChartComponent from "../components/ChartComponent.vue";

const tabs = ref([] as { id: number; symbol: string }[]);

const activeTabId = ref(1);

const activeTab = computed(() => _.find(tabs.value, { id: activeTabId.value }));

let nextTabId = 1;

const addTab = (symbol: string) => {
  tabs.value.push({
    id: nextTabId++,
    symbol: symbol,
  });
};

onMounted(() => {
  addTab("AAA");
  addTab("BBB");
});
</script>

<template>
  <div>
    <!-- 标签切换栏 -->
    <div class="tabs-nav">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ active: tab.id === activeTabId }"
        @click="activeTabId = tab.id"
      >
        {{ tab.symbol }}
      </button>
    </div>

    <!-- 每个标签对应独立组件实例 -->
    <div class="tab-container">
      <ChartComponent
        v-for="tab in tabs"
        :key="tab.id"
        :symbol="tab.symbol"
        v-show="tab.id === activeTabId"
      />
    </div>
  </div>
</template>

<style scoped>
.tabs-nav button {
  margin-right: 8px;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.tabs-nav button.active {
  background-color: #2c3e50;
  color: #fff;
  border-color: #2c3e50;
}
.tab-container {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

关键改动说明 #

• 移除了tab对象中的component字段，直接在模板中循环渲染ChartComponent
• 通过v-for="tab in tabs"为每个标签生成独立的组件实例，:key="tab.id"确保Vue能正确区分不同实例
• 用v-show控制激活标签对应的组件显示，其他组件保持隐藏状态
• 给每个组件传递:symbol="tab.symbol"，确保实例能获取对应的数据上下文

进阶优化：保留组件状态 #

如果切换标签时不想销毁组件实例（比如保留图表的交互状态），可以用<keep-alive>配合v-if实现缓存：

<template>
  <div class="tab-container">
    <keep-alive>
      <ChartComponent
        v-for="tab in tabs"
        :key="tab.id"
        :symbol="tab.symbol"
        v-if="tab.id === activeTabId"
      />
    </keep-alive>
  </div>
</template>

这种方式下，非激活状态的组件会被缓存，再次激活时不会重新初始化，同时每个标签依然对应独立的组件实例。

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