Vue - 単一のページに分かれていない入れ子コンポーネント

Question

私はVueで新しく、Vueでコンポーネントの構造がどのように機能するかを学びます。
以下は です。私のコードはcodepenです。
Nesting Components

<div id="todolist"> 
    <first-layer> 
     <second-layer></second-layer> 
    </first-layer> 
</div> 

<script> 
var secondLayer = Vue.extend({ 
    template: '<div>i am second layer.</div>' 
}); 

var firstLayer = Vue.extend({ 
    template: '<div>I am first layer.</div>', 
    components: secondLayer, 
}); 

var todolist = new Vue({ 
    el: "#todolist", 
    components: { 
     'first-layer': firstLayer, 
    } 
}); 
<script> 

は、私は何をしようとすると、コンポーネントのプロパティでそれを呼び出してオブジェクトを宣言することによって、その親のうちの成分を分離することです。 最初のレイヤーで動作しました。 しかし、同じ動きで同じ要素を（ネストするような）コンポーネントでやろうとすると、2番目のレイヤーが期待どおりに表示されませんでした。何故ですか？

そして.vueファイル9月せずにこれらを処理するための推奨構成は何である

Answer 1

あなたの例では、ネストされたタグで機能しない理由<first-layer :name='name'> thatsのようにバインドすることができ、いくつかのparamをPaaSのために、これまであなたが失われます。この内に置くものをテンプレートでreplacefれることを意味します<first-layer>の中に配置したテンプレートをそのコンポーネントのテンプレートで上書きします。それを防ぐために

、あなたはslotsを使用することができます。

var firstLayer = Vue.extend({ 
    template: '<div>I am first layer1.<slot></slot></div>' 
}); 

今あなたが<first-layer>タグの間に置くすべてのコンテンツがこのスロットになります。

あなたが別のスロットを持つより複雑な部品が必要な場合は、named slots

Answer 2

使用second-layerテンプレートfirst-layer内部

template: '<div>I am first layer1.<div><second-layer></second-layer></div></div>', 

の作業例

var secondLayer = Vue.extend({ 
 
    template: '<div>i am second layer2.</div>' 
 
}); 
 

 
var firstLayer = Vue.extend({ 
 
    template: '<div>I am first layer1.<div><second-layer></second-layer></div></div>', 
 
    components: { 
 
\t \t 'second-layer': secondLayer, 
 
\t } 
 
}); 
 

 
var todolist = new Vue({ 
 
\t el: "#todolist", 
 
\t components: { 
 
\t \t 'first-layer': firstLayer, 
 
\t } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script> 
 
\t \t <div id="todolist"> 
 
\t \t \t <first-layer> 
 
\t \t \t </first-layer> 
 
\t \t </div>

として <first-layer>タグを使用して

は、我々がこれがVueのために起こっている