Vue.js: 动态与异步组件

<!-- ✅ 正确版：1 个 <component> 切换 -->
<template>
  <div class="tabs">
    <button 
      v-for="tab in tabs" 
      :key="tab.name"
      :class="{ active: currentTab === tab.name }"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>
    
    <!-- ✅ 1 个 <component> 标签动态切换 -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
const { ref, computed, defineAsyncComponent } = Vue

// 同步组件
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'

// 异步组件（按需加载）
const SettingsTab = defineAsyncComponent(() => import('./tabs/SettingsTab.vue'))

const tabs = [
  { name: 'home', label: 'Home' },
  { name: 'profile', label: 'Profile' },
  { name: 'settings', label: 'Settings' }
]

const currentTab = ref('home')

// 计算属性：根据 currentTab 决定显示哪个组件
const currentTabComponent = computed(() => {
  return { home: HomeTab, profile: ProfileTab, settings: SettingsTab }[currentTab.value]
})
</script>

<!-- 写法 1：组件名字符串（全局注册过的） -->
<component :is="'HomeTab'" />

<!-- 写法 2：组件对象（最常用） -->
<component :is="HomeTab" />

<!-- 写法 3：动态计算属性 -->
<component :is="currentTabComponent" />

<!-- 写法 4：异步组件对象 -->
<component :is="asyncComponent" />

<!-- 写法 5：内联组件对象 -->
<component :is="{ template: '<div>Inline</div>' }" />

<!-- TabContainer.vue -->
<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab.name"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>
    
    <!-- 动态组件 -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
const { ref, computed } = Vue
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

const tabs = [
  { name: 'home', label: 'Home' },
  { name: 'profile', label: 'Profile' },
  { name: 'settings', label: 'Settings' }
]

const currentTab = ref('home')

const currentTabComponent = computed(() => ({
  home: HomeTab,
  profile: ProfileTab,
  settings: SettingsTab
}[currentTab.value]))
</script>

初始「首页」按钮绿底白字高亮，下方虚线框显示「首页：今日待办 3 条，未读消息 5 条」。
点「个人资料」→ 高亮跟着移过去，面板内容整体换成「个人资料：Alice / 管理员 / 已登录 12 天」。
再点「设置」→ 再换成设置文案；三块面板共用同一个 `<component>` 位置，切换时旧组件被销毁重建。

<script setup>
const { defineAsyncComponent } = Vue
import LoadingSpinner from './LoadingSpinner.vue'

// 异步组件：只有使用 ChartEditor 时才加载它的代码
const ChartEditor = defineAsyncComponent({
  // 1. 加载函数
  loader: () => import('./ChartEditor.vue'),
  
  // 2. 加载中显示
  loadingComponent: LoadingSpinner,
  
  // 3. 加载失败显示
  errorComponent: ErrorMessage, // 需要 import ErrorMessage from './ErrorMessage.vue'
  
  // 4. 加载延迟（避免闪烁）
  delay: 200
})
</script>

<template>
  <ChartEditor v-if="showEditor" />
</template>

<script setup>
const { defineAsyncComponent } = Vue

// ✅ 简化版：只有 loader
const ChartEditor = defineAsyncComponent(() => import('./ChartEditor.vue'))
</script>

三个按钮：Home 绿色（当前选中）、Profile、Settings，下方浅绿面板显示「Home」、按钮「计数: 0」和灰色提示文字。
点计数 → 1；切到 Profile（蓝底，显示「用户资料」）再切回 Home，计数仍是 1。
控制台随切换打印 xxx mounted / activated / deactivated。

初始只有一个按钮「加载 异步组件」，页面其余部分空白。
点击后按钮变「卸载 异步组件」，先出现黄色「⏳ Loading...」，约 1.5 秒后替换为浅绿面板：标题「AsyncHeavy」和「加载完成于: 当前时间」。
再点按钮 → 面板消失，按钮回到「加载 异步组件」。