如何动态地将组件插入html字符串？

Question

我有一个Vue组件，该组件正在解析HTML字符串并将组件插入到已解析的字符串中，如下所示：

computed: {
  // Notional string and metadata array:
  myString: function () {
    return “<p>The quick brown fox jumps over the lazy dog</p>”;
  },
  metadata: function () {
    return [
      {
        index: 7, 
        value: ‘quick brown fox’, 
        speed: ‘quick’, 
        color: ‘brown’, 
        animal: ‘fox’
      },
      {
        index: 38, 
        value: ‘lazy dog’, 
        speed: ‘lazy’, 
        color: null, 
        animal: ‘dog’
      }
      // ...
    ];
  }
}

我可以轻松解析字符串，但是将字符串缝合在一起很容易。

我目前正在解析字符串，用绑定到相应元数据对象的组件替换“ index”中通过“ value.length”处的字符：

<p>The <my-component :metadata=“getMetadataByIndex(7)” /> jumps over the <my-component :metadata=“getMetadataByIndex(38)” /> </p>

然后我使用'$ mount（）'来解析结果文本...但是，这在我的应用程序中造成了很多额外的开销。它循环遍历元数据数组以进行解析，然后进行安装，然后对于每个已安装的组件，它必须再次遍历元数据以查找对应的元素（如果数组发生更改，我将无法使用数组键）。

有没有更有效的方法来实现这一目标？我曾尝试将字符串分解成这样：

[
  ‘<p>The ‘,
  { ... },
  ‘ jumps over the ‘
  { ... }, 
  ‘</p>’
]

并使用“ v-for”和命名槽将其重新组装，但由于html在重新编译之前是无效的，因此无法正常工作，因此未封闭的HTML元素在渲染时过早关闭。