动态渲染Vue模板

Question

我有一个Vue模板数据的字符串。例如，
String s = "<div>{{myData}}</div>"

现在我想在我已经定义好的Vue组件中进行渲染。

<template>
<div>
   HERE I NEED TO PLACE THE STRING
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data: {
    myData: "IRONMAN"
  },
}
</script>

现在我希望输出为IRONMAN

我该如何实现？请帮忙。 谢谢。

- bCliks

---

这段代码 this.template = Vue.compile('<div>{{myData}}</div>').render 看起来很有前途。来源 - Roland Starke

有没有什么理由使 div 不成为子组件本身？ - Sebastian

这个 String s 是从哪里来的？ - void

Answer 1

您可以使用单文件组件实现此功能 - 我有一个名为Dynamic.vue的组件，它接受HTML字符串 - 我使用它允许用户生成自己的模板，并且绑定都正确匹配，例如：

<script>
export default {
  data () {
    return {
      someVar: 'Test'
    }
  },
  props: {
    templateHtml: {
      templateHtml: true,
      type: String
    }
  },
  created () {
    this.$options.template = this.templateHtml
  }
}
</script>

如果你像这样调用它：

this.htmlData = '<div>Hello - {{{someVar}}</div>'
....
<my-dynamic-component :template-html="htmlData" />`

您将看到输出

Hello Test

然后，在SFC中省略<template>部分。

注意：为了使此方法有效，您还必须在项目中包含Vue编译器（因为它处理将SFC编译为渲染函数的工作，这些函数被Vue用于显示数据）。

此链接：https://v2.vuejs.org/v2/guide/installation.html#CLI 可以提供有关包含Vue编译器的更多信息。

- webnoob

---

如何在我的项目中包含Vue编译器 - bCliks

你正在使用webpack吗？你的项目是如何编译的？我已经为你添加了一个主要帖子的链接，供你阅读。 - webnoob