vue 实现动态组件

Vue 动态组件的实现方法

Vue 提供了 <component> 元素和 is 属性来实现动态组件渲染。以下是几种常见实现方式：

基础用法

通过 is 属性绑定组件名或组件选项对象：

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

data() {
  return {
    currentComponent: 'ComponentA'
  }
}

动态切换组件

结合计算属性或方法动态决定渲染的组件：

<button @click="currentComponent = 'ComponentA'">显示A</button>
<button @click="currentComponent = 'ComponentB'">显示B</button>
<component :is="currentComponent"></component>

保持组件状态

使用 <keep-alive> 包裹动态组件以保持状态：

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

异步组件

配合动态导入实现异步加载：

components: {
  AsyncComponent: () => import('./AsyncComponent.vue')
}

动态组件传参

通过 props 传递数据：

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

注意事项

• 动态组件名需在 components 选项中注册
• 动态组件切换时默认会销毁旧组件实例
• 使用 <keep-alive> 可缓存非活跃组件状态
• 异步组件需处理加载和错误状态

高级用法示例

结合路由实现布局组件动态渲染：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: 'a', component: ComponentA },
        { path: 'b', component: ComponentB }
      ]
    }
  ]
})