Vue类组件如何根据后端返回动态添加指定位置的组件？

背景 #

后端返回如下结构的ItemsToAdd数组：

interface ItemsToAdd {
  Page: string; // 示例值：MemberPage
  Feature: string; // 示例值：Search
  Text: string; // 特征说明文本
}

前端通过枚举匹配，筛选当前页面（MemberPage）的有效特征项：

private get itemsForPageFeatures(): ItemsToAdd[] {
  return this.items.filter(
    (f) =>
      f.page === Pages.MemberPage &&
      f.feature != null
  );
}

需求 #

后端配置会频繁变更，需避免在模板中硬编码组件（防止快速产生死代码），完全通过后端返回的ItemsToAdd配置控制渲染：根据Feature属性匹配对应ref的组件，在其下方动态添加NewMinorFeatureTextBox组件。

当前模板示例：

<template>
  <div class="container-fluid mt-3">
    <div class="d-flex flex-row justify-content-between flex-wrap align-items-center">
      <div class="d-align-self-end">
        <SearchBox :ref="Features.Search" />
      </div>
    </div>

    <MessagesFilter :ref="Features.MessagesFilter" />

    <DataChart :ref="Features.DataChart" />
  </div>
</template>

尝试的无效代码 #

之前尝试手动创建DOM元素挂载，但appendChild不符合Vue的组件渲染逻辑，无法生效：

private showTextBoxes() {
  this.itemsForPageFeatures.forEach((element) => {
    let el = this.$createElement(NewMinorFeatureTextBox, {
      props: {
        item: element,
      },
    });

    var ref = `${element.feature}`

    this.$refs.ref.appendChild(el);
  });
}

可行实现方案 #

方案一：响应式模板封装（推荐） #

利用Vue的动态组件和计算属性，通过封装通用容器组件实现无硬编码的动态渲染，完全符合Vue响应式理念。

1. 封装FeatureWrapper容器组件

<!-- FeatureWrapper.vue -->
<template>
  <div>
    <!-- 渲染目标功能组件 -->
    <component :is="featureComponent" :ref="featureKey" />
    <!-- 当后端返回对应Feature时，渲染说明组件 -->
    <NewMinorFeatureTextBox 
      v-if="matchedItem"
      :item="matchedItem"
    />
  </div>
</template>

<script>
import NewMinorFeatureTextBox from './NewMinorFeatureTextBox.vue';

export default {
  components: { NewMinorFeatureTextBox },
  props: {
    // 要渲染的功能组件（如SearchBox、DataChart）
    featureComponent: {
      type: Object,
      required: true
    },
    // 组件对应的Feature标识（与后端返回的Feature值匹配）
    featureKey: {
      type: String,
      required: true
    },
    // 当前页面的所有特征项
    pageItems: {
      type: Array,
      required: true
    }
  },
  computed: {
    // 匹配当前Feature对应的后端配置项
    matchedItem() {
      return this.pageItems.find(item => item.feature === this.featureKey);
    }
  }
};
</script>

2. 父组件中使用容器组件

<template>
  <div class="container-fluid mt-3">
    <div class="d-flex flex-row justify-content-between flex-wrap align-items-center">
      <div class="d-align-self-end">
        <FeatureWrapper 
          :feature-component="SearchBox"
          :feature-key="Features.Search"
          :page-items="itemsForPageFeatures"
        />
      </div>
    </div>

    <FeatureWrapper 
      :feature-component="MessagesFilter"
      :feature-key="Features.MessagesFilter"
      :page-items="itemsForPageFeatures"
    />

    <FeatureWrapper 
      :feature-component="DataChart"
      :feature-key="Features.DataChart"
      :page-items="itemsForPageFeatures"
    />
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue';
import MessagesFilter from './MessagesFilter.vue';
import DataChart from './DataChart.vue';
import FeatureWrapper from './FeatureWrapper.vue';

export default {
  components: { SearchBox, MessagesFilter, DataChart, FeatureWrapper },
  // 其他逻辑：如获取后端数据、定义Pages/Features枚举等
};
</script>

这种方案的优势是完全依托Vue的响应式系统，无需手动操作DOM，后续新增功能组件时只需添加对应的FeatureWrapper，后端返回对应Feature即可自动渲染说明组件。

方案二：手动挂载组件（适合特殊场景） #

如果需要更灵活的DOM操作，可以通过Vue的组件实例手动挂载，注意要处理组件销毁避免内存泄漏：

// 保存动态创建的组件实例，用于销毁
private dynamicComponents: any[] = [];

private showTextBoxes() {
  this.itemsForPageFeatures.forEach((element) => {
    // 创建组件实例
    const textBoxInstance = new NewMinorFeatureTextBox({
      parent: this, // 绑定父组件上下文
      propsData: { item: element }
    });
    // 挂载组件并获取真实DOM
    const textBoxEl = textBoxInstance.$mount().$el;
    // 保存实例以便后续销毁
    this.dynamicComponents.push(textBoxInstance);

    // 获取目标组件的DOM元素
    const targetRef = this.$refs[element.feature];
    if (targetRef) {
      const targetEl = targetRef.$el || targetRef;
      // 将说明组件插入到目标组件的下方
      targetEl.parentNode.insertBefore(textBoxEl, targetEl.nextSibling);
    }
  });
}

// 组件销毁时清理动态创建的组件
beforeDestroy() {
  this.dynamicComponents.forEach(instance => {
    instance.$destroy();
  });
}

注意：该方法需在组件挂载完成后调用（如mounted钩子），且仅推荐在无法通过模板实现的特殊场景下使用。

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