VueJs中嵌套动态组件的高效使用方法

你不需要在每个涉及动态组件渲染的业务组件里重复编写v-for+动态组件的逻辑，嵌套循环属于典型的重复代码，后期维护成本很高，推荐用以下方案实现：

方案1：抽离可递归的通用动态组件渲染器（最优解） #

将「根据组件配置数组渲染实际组件」的逻辑抽离为独立的通用组件，支持递归渲染嵌套结构，一次编写即可在全项目任意位置使用，无论嵌套多少层都不需要额外编写循环逻辑。

通用渲染器实现（DynamicComponentRenderer.vue） #

<template>
  <template v-for="(comp, index) in componentList" :key="comp.id || index">
    <component :is="comp.name" v-bind="comp.fields">
      <!-- 自动递归渲染嵌套子组件 -->
      <DynamicComponentRenderer
        v-if="Array.isArray(comp.children) && comp.children.length"
        :componentList="comp.children"
      />
    </component>
  </template>
</template>

<script setup>
defineProps({
  componentList: {
    type: Array,
    required: true,
    default: () => []
  }
})
</script>

这个组件接收的componentList prop和你现有的allComponentsInPage数据结构完全兼容，如果需要支持多层嵌套，只要在对应组件的配置项里加children字段，值为子组件的配置数组即可。

使用方式 #

1. 页面顶层渲染时，直接替换原有重复的v-for代码：

<!-- 原页面文件 -->
<template>
  <DynamicComponentRenderer :componentList="allComponentsInPage" />
</template>

2. 你需要实现的MultipleComponent.vue也不需要单独写循环，直接复用渲染器即可：

<!-- MultipleComponent.vue -->
<template>
  <DynamicComponentRenderer :componentList="nestedComponentList" />
</template>

<script setup>
defineProps({
  nestedComponentList: {
    type: Array,
    required: true
  }
})
</script>

方案优势 #

• 核心渲染逻辑只维护一份，后续如果需要加统一的组件加载态、权限校验、错误兜底等逻辑，只需要修改这一个文件
• 天然支持任意深度的组件嵌套，不需要编写多层嵌套的v-for
• 所有动态组件渲染场景都可以直接调用，无重复代码

注意事项 #

不推荐用数组索引index作为列表渲染的key，如果你的组件列表存在动态增删、排序、重排的场景，建议给每个组件配置项增加全局唯一的id字段作为key，避免Vue组件复用导致的状态错乱问题。

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