Vue.js中如何向父组件动态添加大量子组件？

当然有办法！不管你用的是Vue、React还是Angular，都有成熟的方案来动态渲染上百个组件，不用在父模板里一个个手写标签。下面分主流框架给你具体说明：

Vue（2/3） #

Vue 提供了内置的 <component> 标签来实现动态组件渲染，核心思路是通过 :is 属性绑定组件名称/对象，配合循环批量渲染：

基础实现（Vue 3） #

<template>
  <div class="component-container">
    <!-- 循环渲染所有动态组件 -->
    <component 
      v-for="(comp, index) in dynamicComponents" 
      :key="index"
      :is="comp.component"
      :some-prop="comp.props"
      @some-event="handleEvent"
    />
  </div>
</template>

<script setup>
// 引入所有需要动态渲染的组件（可以批量导入，比如用webpack的require.context）
import CompA from './components/CompA.vue'
import CompB from './components/CompB.vue'
// ... 其他组件

// 维护组件列表，可包含组件本身和对应的props
const dynamicComponents = [
  { component: CompA, props: { id: 1 } },
  { component: CompB, props: { id: 2 } },
  // ... 剩下98个组件的配置
]

const handleEvent = (data) => {
  // 处理组件触发的事件
}
</script>

优化建议：懒加载+批量导入 #

如果有100个组件，一次性导入会增大打包体积，推荐用异步组件和批量导入：

// 用import.meta.glob批量获取组件文件
const components = import.meta.glob('./components/*.vue')

// 转换为动态组件列表
const dynamicComponents = Object.keys(components).map(path => {
  const componentName = path.split('/').pop().replace('.vue', '')
  return {
    // 用defineAsyncComponent懒加载
    component: defineAsyncComponent(components[path]),
    props: { id: componentName }
  }
})

React #

React 中组件本身就是JavaScript对象，你可以通过组件映射表配合循环来动态渲染：

基础实现 #

import React from 'react'
import CompA from './components/CompA'
import CompB from './components/CompB'
// ... 其他组件

// 创建组件映射表
const componentMap = {
  CompA,
  CompB,
  // ... 剩下98个组件
}

// 组件列表，可包含组件key和props
const componentList = [
  { key: 'CompA', props: { id: 1 } },
  { key: 'CompB', props: { id: 2 } },
  // ... 其他组件配置
]

const ParentComponent = () => {
  return (
    <div className="component-container">
      {componentList.map(item => {
        const Comp = componentMap[item.key]
        return <Comp key={item.key} {...item.props} onSomeEvent={handleEvent} />
      })}
    </div>
  )
}

const handleEvent = (data) => {
  // 处理事件
}

export default ParentComponent

优化建议：懒加载+虚拟滚动 #

• 用React.lazy实现组件懒加载，配合Suspense显示加载状态：

const CompA = React.lazy(() => import('./components/CompA'))
// 在渲染时包裹Suspense
<Suspense fallback={<div>Loading...</div>}>
  {/* 动态组件列表 */}
</Suspense>

• 如果组件数量极大，推荐用虚拟滚动库（如react-window），只渲染可视区域内的组件，提升性能。

Angular #

Angular 可以通过ViewContainerRef动态创建组件实例，步骤如下：

基础实现（Angular 13+） #

import { Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
import { CompAComponent } from './comp-a/comp-a.component';
import { CompBComponent } from './comp-b/comp-b.component';
// ... 其他组件

@Component({
  selector: 'app-parent',
  template: `<ng-template #componentContainer></ng-template>`
})
export class ParentComponent implements OnInit {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  // 组件列表
  componentList = [CompAComponent, CompBComponent /* ... 其他组件 */];

  ngOnInit(): void {
    this.renderDynamicComponents();
  }

  renderDynamicComponents(): void {
    this.componentList.forEach((Comp, index) => {
      // 创建组件实例
      const componentRef = this.container.createComponent(Comp);
      // 传递props
      componentRef.setInput('id', index + 1);
      // 监听组件输出事件
      componentRef.instance.someEvent.subscribe(data => this.handleEvent(data));
    });
  }

  handleEvent(data: any): void {
    // 处理事件
  }
}

注意事项 #

• 所有动态组件需要在NgModule的declarations中声明（Angular 9+无需再配置entryComponents）。
• 同样可以结合import()实现懒加载，避免初始包体积过大。

通用优化 Tips #

• 懒加载优先：100个组件一次性加载会严重影响首屏性能，一定要用对应框架的懒加载方案拆分代码。
• 虚拟滚动：组件数量超过50个时，虚拟滚动能大幅减少DOM节点数量，提升页面流畅度。
• 组件复用与抽象：如果组件有相似逻辑，尽量抽象出公共父组件或hooks，减少重复代码。

内容的提问来源于stack exchange，提问作者Evil_Sperm