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の文書が言うので

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/

私はパーシャルを試してみました "あなたはテンプレートの部分を再利用する必要がある場合は、パーシャルを使用する必要があります。"

動作しません。たぶん私は間違いをしている、私は間違いが何であるか分からない。

ありがとうございます。

Answer 1

Vuejsは外部HTMLを直接使用することを非常に困難にします。 v-htmlは単にHTMLコンテンツをエスケープするため、効果はありません。 https://vuejs.org/v2/guide/syntax.html#Raw-HTML

が動的にそれが簡単にXSSの脆弱性につながることができますので、非常に危険なことがあなたのウェブサイト上の任意のHTMLをレンダリングする：ここに記載されているように、それの目的は、XSS攻撃を避けるためです。信頼できるコンテンツでのみHTML補間を使用し、ユーザー提供のコンテンツでは使用しないでください。

あなたが本当に外部のHTMLを使用する必要がある場合、ここに文書化さVue.compile()を使用することが可能である：https://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