如何在v-html中使用组件

How to use components in v-html

本文关键字：组件 v-html      更新时间：2023-09-26

我正在尝试使用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/

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

它不起作用。也许我在犯错误，我不知道什么是错误。

谢谢。

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-编译

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

相关文章：