第06章：Dynamic Components（动态组件）

在现代 Web 应用开发中，我们经常需要根据不同的条件动态地切换和渲染不同的组件。传统的方法可能会使用大量的 v-if 和 v-else 指令来实现条件渲染，但这种方式在组件数量较多时会变得冗长且难以维护。

Vue 提供了一个优雅的解决方案------Dynamic Components （动态组件）。通过使用特殊的 <component> 元素和 is 属性，我们可以在同一个位置动态地切换不同的组件，实现更加灵活和可维护的组件架构。

核心概念

什么是动态组件？

动态组件是 Vue 提供的一种特殊机制，允许我们在运行时动态地决定要渲染哪个组件。它的核心是使用 <component> 元素配合 is 属性来实现组件的动态切换。

基本语法

<template>
  <component :is="currentComponent" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref(ComponentA)

// 或者使用字符串形式
const currentComponentName = ref('ComponentA')
</script>

动态组件的工作原理

1. 组件注册：首先需要将要动态切换的组件注册到当前组件中

2. 状态管理：使用响应式数据来控制当前要显示的组件

3. 动态渲染 ：Vue 根据 is 属性的值来决定渲染哪个组件

4. 生命周期管理：组件切换时会触发相应的生命周期钩子

基础用法

简单的标签页切换

让我们从一个经典的标签页切换例子开始：

<!-- App.vue -->
<template>
  <div class="tab-container">
    <div class="tab-buttons">
      <button
        v-for="(component, name) in tabs"
        :key="name"
        :class="['tab-button', { active: currentTab === name }]"
        @click="currentTab = name"
      >
        {{ name }}
      </button>
    </div>

    <div class="tab-content">
      <component :is="tabs[currentTab]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Home from './components/Home.vue'
import Profile from './components/Profile.vue'
import Settings from './components/Settings.vue'

const currentTab = ref('Home')

const tabs = {
  Home,
  Profile,
  Settings
}
</script>

<style scoped>
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-button {
  padding: 12px 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #333;
  background: #f5f5f5;
}

.tab-button.active {
  color: #007bff;
  border-bottom-color: #007bff;
  font-weight: 600;
}

.tab-content {
  min-height: 300px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}
</style>

子组件示例

<!-- Home.vue -->
<template>
  <div class="tab-panel">
    <h2>🏠 首页</h2>
    <p>欢迎来到首页！这里是应用的主要内容区域。</p>
    <div class="content-section">
      <h3>最新动态</h3>
      <ul>
        <li>系统更新 v2.1.0 已发布</li>
        <li>新增了动态组件功能</li>
        <li>修复了若干已知问题</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.tab-panel {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.content-section {
  margin-top: 20px;
  padding: 16px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-section h3 {
  margin: 0 0 12px 0;
  color: #333;
}

.content-section ul {
  margin: 0;
  padding-left: 20px;
}

.content-section li {
  margin-bottom: 8px;
  color: #666;
}
</style>

<!-- Profile.vue -->
<template>
  <div class="tab-panel">
    <h2>👤 个人资料</h2>
    <div class="profile-form">
      <div class="form-group">
        <label>姓名：</label>
        <input v-model="profile.name" type="text" />
      </div>
      <div class="form-group">
        <label>邮箱：</label>
        <input v-model="profile.email" type="email" />
      </div>
      <div class="form-group">
        <label>个人简介：</label>
        <textarea v-model="profile.bio" rows="4"></textarea>
      </div>
      <button @click="saveProfile" class="save-btn">保存</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const profile = ref({
  name: '张三',
  email: 'zhangsan@example.com',
  bio: '这是一个简单的个人简介...'
})

const saveProfile = () => {
  alert('个人资料已保存！')
}
</script>

<style scoped>
.tab-panel {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-form {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
}

.save-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.save-btn:hover {
  background: #0056b3;
}
</style>

<!-- Settings.vue -->
<template>
  <div class="tab-panel">
    <h2>⚙️ 设置</h2>
    <div class="settings-panel">
      <div class="setting-group">
        <h3>通知设置</h3>
        <div class="setting-item">
          <label>
            <input v-model="settings.emailNotifications" type="checkbox" />
            邮件通知
          </label>
        </div>
        <div class="setting-item">
          <label>
            <input v-model="settings.pushNotifications" type="checkbox" />
            推送通知
          </label>
        </div>
      </div>

      <div class="setting-group">
        <h3>主题设置</h3>
        <div class="setting-item">
          <label>主题：</label>
          <select v-model="settings.theme">
            <option value="light">浅色主题</option>
            <option value="dark">深色主题</option>
            <option value="auto">跟随系统</option>
          </select>
        </div>
      </div>

      <div class="setting-group">
        <h3>语言设置</h3>
        <div class="setting-item">
          <label>语言：</label>
          <select v-model="settings.language">
            <option value="zh-CN">简体中文</option>
            <option value="en-US">English</option>
            <option value="ja-JP">日本語</option>
          </select>
        </div>
      </div>

      <button @click="saveSettings" class="save-btn">保存设置</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const settings = ref({
  emailNotifications: true,
  pushNotifications: false,
  theme: 'light',
  language: 'zh-CN'
})

const saveSettings = () => {
  alert('设置已保存！')
}
</script>

<style scoped>
.tab-panel {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-panel {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.setting-group {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.setting-group:last-of-type {
  border-bottom: none;
  margin-bottom: 20px;
}

.setting-group h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
}

.setting-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555;
  cursor: pointer;
}

.setting-item input[type="checkbox"] {
  margin: 0;
}

.setting-item select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.save-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.save-btn:hover {
  background: #218838;
}
</style>

高级特性

1. 使用字符串形式的组件名

除了直接传递组件对象，我们还可以使用字符串形式的组件名：

<template>
  <div>