在掌握了 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; }
</>
{{ tab.name }}
