vue.js - vue 将字符串渲染为已经存在的组件

Question

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

<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 渲染函数并不重要，我只是想知道我是否可以做到以及如何做到。

Answer 1

您需要 runtime + compiler version vue，然后您可以动态创建组件:

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())