javascript - 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

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

如果您确实需要使用外部 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