Vue.js2 - 子コンポーネントがレンダリングされていません。

Question

私はvuejsを初めて使用していて、それを再生し始めました。別のチュートリアルを試していますが、このコードサンプルでは動作しません。誰でもの第2コンポーネントがレンダリングされていない理由を説明できますか？

Vue.component('first-component', { 
 
    template: `<div>This is first component: {{val}}!</div>`, 
 
    data: function() { 
 
    return { 
 
     val: "FIRST <second-component></second-component>" 
 
    } 
 
    }, 
 
}) 
 

 
Vue.component('second-component', { 
 
    template: `<p>This is second component: {{val}}</p>`, 
 
    data: function() { 
 
    return { 
 
     val: 'SECOND' 
 
    } 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#example' 
 
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 

 
<div id="example"> 
 
    <first-component></first-component> 
 
</div>

Answer 1

問題は、valの変数に<second-component>を入れて、口ひげの構文を使用してレンダリングしようとすると、しかしdocsダブル口ひげに述べたように、プレーンテキストとしてデータを解釈してきています

をHTMLではないあなたは、プレーンなHTMLなどの部品を挿入するためにv-htmlを使用することができますが、再び、それはstatedです：内容はinserありますプレーンなHTMLとして扱われ、Vueテンプレートとしてコンパイルされません。あなたがsecond-componentをレンダリングすることができ

唯一の方法は、テンプレートでこれを置くことである：あなたが「ヴァル」の「データ」としてそれを返すされているためです

template: `<div>This is first component: {{val}}!<second-component></second-component></div>`, 

Answer 2

。したがって、それはコンポーネントに評価されません。あなたがテンプレートに入れたら、それは動作します。 __これは、それが取得していない理由である - __「彼らはVueのテンプレートとしてコンパイルされることはありません。内容はプレーンなHTMLとして挿入されることに注意してください」声明を指摘して

Vue.component('first-component', { 
 
    template: `<div>This is first component: {{val}}! <second-component></second-component></div>`, 
 
    data: function() { 
 
    return { 
 
     val: "FIRST" 
 
    } 
 
    }, 
 
}) 
 

 
Vue.component('second-component', { 
 
    template: `<p>This is second component: {{val}}</p>`, 
 
    data: function() { 
 
    return { 
 
     val: 'SECOND' 
 
    } 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#example' 
 
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 

 
<div id="example"> 
 
    <first-component></first-component> 
 
</div>