企业官网建设流程全解析

实现 Tab 切换面板（动态组件）Demo

在 Vue 中，动态组件（<component :is="...">）非常适合实现 Tab 切换面板——根据当前选中的 Tab，动态渲染对应的组件，且组件实例会被复用或销毁（取决于是否使用<KeepAlive>）。

下面是一个完整的 Vue 3 单文件组件 Demo，包含 Tab 导航和内容区域，并演示了组件切换、状态保持和 Props 传递。

1. 最终效果预览

• 顶部显示三个 Tab 标签：首页、列表、设置。
• 点击 Tab 切换下方内容区域，动态渲染对应组件。
• 每个 Tab 组件拥有独立的内部状态（如输入框内容），切换回去后状态保留（使用<KeepAlive>）。

2. 完整代码（TabPanelDemo.vue）

<template> <div class="tab-demo"> <!-- Tab 导航栏 --> <div class="tab-nav"> <div v-for="tab in tabs" :key="tab.name" class="tab-item" :class="{ active: currentTab === tab.name }" @click="currentTab = tab.name" > {{ tab.label }} </div> </div> <!-- 动态组件内容区（带 KeepAlive 缓存） --> <div class="tab-content"> <KeepAlive> <component :is="currentComponent" :user="currentUser" @update="handleUpdate" /> </KeepAlive> </div> <!-- 显示当前激活的 Tab 名称（调试用） --> <p style="margin-top: 16px; color: #888;"> 当前激活 Tab：{{ currentTab }} </p> </div> </template> <script setup> import { ref, computed } from 'vue' // ----- 1. 定义 Tab 组件（内联方式） ----- // 实际项目中可单独抽离为独立 .vue 文件 const TabHome = { name: 'TabHome', template: ` <div> <h3>🏠 首页</h3> <p>欢迎来到首页！</p> <input v-model="inputValue" placeholder="输入一些内容..." /> <p>输入内容：{{ inputValue }}</p> </div> `, setup() { const inputValue = ref('') return { inputValue } } } const TabList = { name: 'TabList', template: ` <div> <h3>📋 列表</h3> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> <button @click="addItem">添加项</button> </div> `, setup() { const items = ref([ { id: 1, name: 'Vue.js' }, { id: 2, name: 'React' }, { id: 3, name: 'Angular' } ]) const addItem = () => { const newId = items.value.length + 1 items.value.push({ id: newId, name: `新项 ${newId}` }) } return { items, addItem } } } const TabSettings = { name: 'TabSettings', props: ['user'], template: ` <div> <h3>⚙️ 设置</h3> <p>当前用户：{{ user?.name || '未登录' }}</p> <label><input type="checkbox" v-model="darkMode" /> 启用暗黑模式</label> <p>暗黑模式：{{ darkMode ? '开启' : '关闭' }}</p> </div> `, setup() { const darkMode = ref(false) return { darkMode } } } // ----- 2. Tab 配置 ----- const tabs = [ { name: 'home', label: '首页', component: TabHome }, { name: 'list', label: '列表', component: TabList }, { name: 'settings', label: '设置', component: TabSettings } ] // 当前激活的 Tab 名 const currentTab = ref('home') // 计算当前要渲染的组件 const currentComponent = computed(() => { const found = tabs.find(tab => tab.name === currentTab.value) return found ? found.component : null }) // 模拟父组件传递给 Tab 的 Props const currentUser = ref({ name: '张三', role: 'admin' }) // 监听子组件事件 const handleUpdate = (payload) => { console.log('收到子组件更新事件：', payload) } </script> <style scoped> .tab-demo { max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; } .tab-nav { display: flex; gap: 4px; border-bottom: 2px solid #e8e8e8; } .tab-item { padding: 10px 20px; cursor: pointer; border-radius: 6px 6px 0 0; transition: background 0.2s; user-select: none; } .tab-item:hover { background: #f0f0f0; } .tab-item.active { background: #1890ff; color: white; font-weight: bold; } .tab-content { padding: 20px; border: 1px solid #e8e8e8; border-top: none; border-radius: 0 0 6px 6px; min-height: 200px; } </style>

3. 关键点解析

4. 运行效果说明

• 点击首页→ 显示输入框，输入内容后切换到其他 Tab，再切回首页，输入内容依然存在（KeepAlive生效）。
• 点击列表→ 显示列表和“添加项”按钮，点击添加新项，切换后列表状态保留。
• 点击设置→ 显示当前用户（从父组件传递）和暗黑模式开关，状态独立。

5. 与路由的区别

• 动态组件：适合同一页面内的局部切换（如设置面板、仪表盘）。
• Vue Router：适合不同页面的切换，且拥有独立的 URL 和生命周期钩子。

7. 注意事项

• 如果 Tab 组件之间需要独立的缓存策略，可以给<KeepAlive>添加include/exclude属性。
• 动态组件的:is可以传组件对象（如TabHome）或组件名（字符串），但在<script setup>中，使用对象更直接。
• 当currentComponent为null时，<component>不渲染任何内容，可用于占位或错误处理。