Vue 组件切换实战：动态组件与 Tab 切换实现

在掌握了 Vue 组件的基础创建方式以及 data、methods 属性后，接下来我们深入一个实际场景：如何在页面中动态切换不同的组件。

这种需求在前端开发中非常常见，比如 Tab 标签页切换、多视图导航等。通过本案例，我们将重点讲解如何利用 Vue 的动态组件功能来实现平滑的视图切换。

核心思路

Vue 提供了 <component> 标签配合 :is 指令，可以动态地渲染组件。当绑定的变量变化时，页面会自动切换对应的组件实例，无需手动销毁或重新挂载 DOM。

代码实现

下面是一个完整的 HTML 示例，展示了如何使用 CDN 引入 Vue 3 并实现两个子组件的切换。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue 组件切换</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .tab-btn { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; }
        .active { background-color: #42b983; color: white; }
        .container { margin-top: 20px; border: 1px solid #eee; padding: 20px; }
    </style>
</head>
<body>
<div id="app">
    <!-- 切换按钮 -->
    <div class="buttons">
        <button 
            v-for="tab in tabs" 
            :key="tab.id"
            @click="currentTab = tab.id"
            :class="{ active: currentTab === tab.id }"
            class="tab-btn"
        >
            {{ tab.name }}
        </button>
    </div>

    <!-- 动态组件区域 -->
    <div class="container">
        <component :is="currentComponent"></component>
    </div>
</div>

<script>
const { createApp, ref, computed } = Vue;

// 定义第一个组件
const ComponentA = {
    template: '<div><h3>这是组件 A</h3><p>这里展示了一些基础信息。</p></div>'
};

// 定义第二个组件
const ComponentB = {
    template: '<div><h3>这是组件 B</h3><p>这里是另一个模块的内容。</p></div>'
};

createApp({
    components: {
        'component-a': ComponentA,
        'component-b': ComponentB
    },
    setup() {
        const currentTab = ref('a');
        
        // 计算当前要渲染的组件名
        const currentComponent = computed(() => {
            return currentTab.value === 'a' ? 'component-a' : 'component-b';
        });

        const tabs = [
            { id: 'a', name: '模块 A' },
            { id: 'b', name: '模块 B' }
        ];

        return {
            currentTab,
            currentComponent,
            tabs
        };
    }
}).mount('#app');
</script>
</body>
</html>

关键点解析

1. 注册组件：在 setup 之前，需要确保组件已在 components 选项中注册，这样模板中的 component-a 才能被识别。
2. 动态绑定：:is 属性接收的是组件的名称字符串，而不是组件对象本身。这允许我们通过变量控制渲染内容。
3. 性能考虑：默认情况下，切换组件会销毁旧实例并创建新实例。如果希望保留状态（例如输入框的值），可以包裹 <keep-alive> 标签。

通过这个案例，你应该能理解 Vue 处理组件切换的核心机制。在实际项目中，结合路由或状态管理库，这套逻辑同样适用。