从后端我得到一个对象数组，看起来像这样

ItemsToAdd 
 {
  Page: MemberPage
  Feature: Search
  Text: "Something to explain said feature"
 }

所以我把这些值匹配到前端的枚举中，然后在例如会员页面上，我做这个检查

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

我们从后端得到的东西会随着时间的推移而发生很大的变化，最多几周是一样的。所以我想避免在模板中添加组件，因为它会很快变成死代码，并会成为一个巨大的事情，必须到处去删除死代码。因此，我最好使用一个函数添加它，然后例如对于搜索功能，我将在父对象上有一个ref，如

<SearchBox :ref="Features.Search" />

而在代码中只添加ItemsToAdd对象Feature属性与ref匹配的元素
这在Vue中可能吗？像appendChild之类的东西在Vue中不起作用，但这是我能想到的最接近我想要的东西。这个函数基本上只是循环通过itemsForPageFeatures，并添加属于它所运行的页面的功能。
有关模板外观的另一个示例

<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"
  />

假设我们从后端得到了一个答案，其中包含一个具有特性属性DataChart的object和另一个具有Search的object，所以现在我希望在DataChart组件和SearchBox组件下添加组件，但不希望在messagesFilter下添加组件，因为我们没有从后端得到它。但是下周我们在后端进行了更改，所以我们不再希望在searchbox下显示搜索功能组件，所以我们只获得DataChart对象，所以它应该只呈现DataChart对象。因此，该解决方案必须在每次更改我们想要显示的内容时都不必对前端进行更改，因为后端将仅是不需要发布的数据库配置。
我能想到的最接近的是这个函数，它不适用于Vue，因为appendChild在那里不起作用，而是帮助我想象的东西，所以要生成的组件是已知的，并且总是相同类型的组件，它要放置的位置才是动态部分。

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

    var ref = `${element.feature}`

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