Javascript 如何在v-html中使用组件

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

这是我的密码

HTML:

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>'
  }
})

Vue.component（'badge'{
模板：“这是组件”，
})
Vue.partial（'my-partial'，'p>这是一个partial！
'））
//启动应用程序
新Vue({
el:“#应用程序”，
数据：{
html:“这是html
”，
html2:“”，
html3:“”
}
})

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

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

---

谢谢。

非常肯定Vuejs使直接使用外部html变得非常困难

v-html

将简单地替换html内容，因此不会执行任何指令。其目的是避免XSS攻击，如下所述：

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

如果您确实需要使用外部html，可以使用此处记录的

Vue.compile（）

：

可在此处找到一个工作示例：

---

它的相关讨论可以在这里找到：

当文档说“您应该使用partials”时，它不是指“将partials与v-html一起使用”，而是指“使用partials而不是v-html”。使用

v-html

插入的所有内容都将仅为纯html，这意味着其中没有任何组件、指令、小胡子标签或部分内容或任何特定于Vue的内容。通过您的链接，所有内容似乎对我都很好。@LinusBorg我明白！非常感谢。这是我的答案代码@本：谢谢你的评论。我得到了答案。非常感谢。有几个例子中，v-html并没有为我阻止XSS。这是一个在使用v-html时为我暴露漏洞的示例。。。将其粘贴到通过v-html解析的文本中：根据Vuejs文档

，编译方法有一个警告，仅在完整版本中可用。
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>'
  }
})