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的render函数，我只想知道我是否可以做到以及如何做到。

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

vue呈现字符串作为已经存在的组件

1 个答案: