vue2でv-htmlがvueコンポーネントをレンダリングしない

Question

私は、propsを使用してコンポーネントをレンダリングしようとしています。しかし、コンテンツ小道具がコンポーネントでない場合にのみ機能します。これが可能であるhttps://jsfiddle.net/eugenio4/onf54vt5/

// register modal component 
Vue.component('component', { 
    template: '<span class="component-tag">This is component</span>', 
}) 

// start app 
new Vue({ 
    el: '#app', 
    data: function(){ 
    return { 
     test1 : '<label>this is label</label>', 
     test2 : '<component></component>' //this doest work 
    } 
    } 
}) 

<!-- app --> 
<div id="app"> 
    <span v-html="test1"></span> 
    <span v-html="test2"></span> 
</div> 

：ここ

は一例ですか？

Answer 1

documentationが明確に指摘するようにいいえ、あなたは、この使用したV-HTMLを行うことはできません。内容はプレーンなHTMLとして挿入されていることを

注 - 彼らはVueのテンプレートとしてコンパイルされることはありませんが。

内容はプレーンHTMLとして挿入されます。データバインディング/ vueコンポーネントは無視されます。 Vueは文字列ベースのテンプレートエンジンではないので、テンプレートパーシャルを作成するためにv-htmlを使用することはできません。その代わりに、UIの再利用と構成の基本単位としてコンポーネントが優先されます。