Comment utiliser les composants dans v-html

Question

J'essaie d'utiliser des composants dans v-html. Je veux obtenir du html à partir de ma propre API, puis je le montrerai.

Voici mon code.

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/

J'ai essayé les partiels parce que le document Vue dit " Si vous avez besoin de réutiliser des morceaux de modèle, vous devez utiliser des partiels ".

Il ne fonctionne pas. Je fais peut-être une erreur, mais je ne sais pas ce qu'est une erreur.

Nous vous remercions.

Answer 1

Il est à peu près certain que Vuejs rend très difficile l'utilisation directe de html externe. v-html remplacera simplement le contenu html et n'exécutera donc aucune directive. Le but est d'éviter les attaques XSS comme documenté ici : https://vuejs.org/v2/guide/syntax.html#Raw-HTML

Le rendu dynamique d'un code HTML arbitraire sur votre site web peut être très dangereux car il peut facilement conduire à des vulnérabilités XSS. N'utilisez l'interpolation HTML que sur du contenu fiable et jamais sur du contenu fourni par l'utilisateur.

Si vous avez vraiment besoin d'utiliser du html externe, il est possible d'utiliser Vue.compile() documentée ici : https://vuejs.org/v2/api/#Vue-compile

Un exemple de travail peut être trouvé ici : https://jsfiddle.net/Linusborg/1zdzu7k1/ et la discussion qui s'y rapporte sont disponibles ici : https://forum.vuejs.org/t/vue-compile-what-is-staticrenderfns-render-vs-staticrenderfns/3950/7