vue 将字符串渲染为已经存在的组件答案

【问题标题】：vue render string as a already existing componentvue 将字符串渲染为已经存在的组件
【发布时间】：2019-03-26 23:43:32
【问题描述】：

我正在尝试构建一个从数据库接收一些 html 作为字符串的 vue 应用程序，就像以下示例一样：

<b-field :label="field.nome" :message="field.message"><b-input :value="value" :type="field.type" :maxlength="field.maxlength" :expanded="true" v-model="inputValue"/></b-field>

因此，如您所见，它可能包含组件，例如来自 buefy 的 b 字段。我的问题是，我可以将此字符串呈现为实际的 buefy 组件及其行为吗？不管是在模板标签中还是通过 JSX 的渲染函数，我只想知道我是否可以做到以及如何做到。

【问题讨论】：

标签： vue.js vue-component jsx

【解决方案1】：

你需要 vue 的 runtime + compiler version，然后你可以动态创建组件：

const vm = Vue({
  template: "<b-field :label=...",
  data: ()=> ({
    field: {nome: ...}
  })
})

您可以将其安装到元素上。

<span ref="placeholder"/>

vm.$mount(this.$refs.placeholder)
this.$on('$destroy', ()=> vm.$destroy())

或者，如果您有多个动态组件：

<span ref="container"/>

vm.$mount()
this.$refs.container.appendChild(vm.$el)
this.$on('$destroy', ()=> vm.$destroy())

【讨论】：

鲍勃，你的回答帮助了我。但是我遇到了两个问题。 A）它只渲染第一个元素，我想遍历一个数组并渲染它给我的每个元素。 B）将值呈现为对象，输入写入“[Object] [Object]”而不是实际值，即使该值是简单的字符串或数字
原始问题中并不清楚，我已经更新了我的答案以考虑多个组件。为“[Object] [Object]”问题创建一个新的 SO 问题，因为该问题没有提供足够的详细信息来回答问题所在。
我不知道为什么，但是将代码更改为.container.appendChild，输入呈现正确的值而不是“[Object] [Object]”。