动态组件的常用 ​

<template>
  <div class="tab-container">
    <!-- 选项卡导航 -->
    <div class="tab-nav">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTabIndex === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <!-- 动态组件区域 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 导入组件
import Select1 from './components/Select1.vue';
import Select2 from './components/Select2.vue';
import Select3 from './components/Select3.vue';

// 定义选项卡数据
const tabs = [
  { name: '选项一', component: Select1 },
  { name: '选项二', component: Select2 },
  { name: '选项三', component: Select3 }
];

// 当前选中的选项卡索引
const currentTabIndex = ref(0);

// 计算属性：获取当前组件
const currentComponent = computed(() => {
  return tabs[currentTabIndex.value].component;
});

// 切换选项卡方法
const switchTab = (index) => {
  currentTabIndex.value = index;
};
</script>

<style scoped>
.tab-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

button.active {
  background-color: #409eff;
  color: white;
}
</style>

<template>
  <div class="tab-container">
    <!-- 选项卡导航 -->
    <div class="tab-nav">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTabIndex === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <!-- 动态组件区域 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 导入组件
import Select1 from './components/Select1.vue';
import Select2 from './components/Select2.vue';
import Select3 from './components/Select3.vue';

// 定义选项卡数据
const tabs = [
  { name: '选项一', component: Select1 },
  { name: '选项二', component: Select2 },
  { name: '选项三', component: Select3 }
];

// 当前选中的选项卡索引
const currentTabIndex = ref(0);

// 计算属性：获取当前组件
const currentComponent = computed(() => {
  return tabs[currentTabIndex.value].component;
});

// 切换选项卡方法
const switchTab = (index) => {
  currentTabIndex.value = index;
};
</script>

<style scoped>
.tab-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

button.active {
  background-color: #409eff;
  color: white;
}
</style>

<!-- 只缓存特定组件 -->
<keep-alive include="Select1,Select2">
  <component :is="currentComponent"></component>
</keep-alive>

<!-- 排除某些组件不缓存 -->
<keep-alive exclude="Select3">
  <component :is="currentComponent"></component>
</keep-alive>

<!-- 只缓存特定组件 -->
<keep-alive include="Select1,Select2">
  <component :is="currentComponent"></component>
</keep-alive>

<!-- 排除某些组件不缓存 -->
<keep-alive exclude="Select3">
  <component :is="currentComponent"></component>
</keep-alive>