如何在 v-html 中使用组件

Question

我正在尝试在 v-html 中使用组件。 我想从自己的 API 获取 html，然后我会展示它。

这是我的代码。

HTML：

<!-- app -->
<div id="app">
  <span v-html="html"></span>
  <badge></badge>
  <span v-html="html2"></span>
  <partial name="my-partial"></partial>
  <span v-html="html3"></span>
</div>

Javascript：

Vue.component('badge', {
  template: '<span class="component-tag">This is component</span>',
})
Vue.partial('my-partial', '<p>This is a partial!</p>')
// start app
new Vue({
  el: '#app',
  data: {
    html: '<p>THIS IS HTML</p>',
    html2: '<badge></badge>',
    html3: '<partial name="my-partial"></partial>'
  }
})

https://jsfiddle.net/9w3kz6xm/4/

我尝试了 partials，因为 Vue 文档说“如果你需要重用模板片段，你应该使用 partials。”

这没用。 也许我犯了错误，我不知道什么是错误。

谢谢你。

Answer 1

可以肯定的是，Vuejs 使得直接使用外部 html 变得非常困难。 v-html将简单地替换 html 内容，因此不会执行任何指令。 它的目的是避免此处记录的 XSS 攻击： https ://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致 XSS 漏洞。 仅对受信任的内容使用 HTML 插值，从不对用户提供的内容使用。

如果您确实需要使用外部 html，可以使用此处记录的Vue.compile() ： https ://v2.vuejs.org/v2/api/#Vue-compile

一个工作示例可以在这里找到： https ://jsfiddle.net/Linusborg/1zdzu7k1/ 和它的相关讨论可以在这里找到： https ://forum.vuejs.org/t/vue-compile-what-is-staticrenderfns -render-vs-staticrenderfns/3950/7