如何在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 插值。

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

Answer 2

使用 web-components 代替常规 Vue 组件怎么样？
我认为它可能会做