Vue 动态组件

使用 <component :is> 实现组件动态切换，构建灵活的多视图界面。 · 难度：入门 · +15XP

动态组件是什么？

Vue 的 <component> 元素配合 :is 属性可以根据变量的值动态渲染不同的组件。这是实现标签页、向导步骤、多状态视图的核心技术。

基本用法

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

currentComponent 可以是注册的组件名称（字符串）或组件选项对象。

切换示例

<button @click="current = 'TabA'">Tab A</button>
<button @click="current = 'TabB'">Tab B</button>
<keep-alive>
  <component :is="current"></component>
</keep-alive>

异步动态组件

动态组件也可以配合 defineAsyncComponent 实现懒加载。

const TabA = defineAsyncComponent(() => import('./TabA.vue'))
const TabB = defineAsyncComponent(() => import('./TabB.vue'))

练习提示

1. 创建两个简单组件：Home 和 About。
2. 使用动态组件在两者间切换，并添加 keep-alive 保留输入状态。