vue.js 2どのように適切にネストコンポーネント

Question

に、あなたは適切に他のコンポーネントにコンポーネントを追加する方法を教えていただけますか？ 以下の例は機能しません。子コンポーネントは、親の内部には表示されません。

<div id="app"> 
    <parent> 
     <child></child> 
    </parent> 
</div> 

<template id='child'> 
    <div>child component</div> 
</template> 

<template id='parent'> 
    <div>parent component</div> 
</template> 

<script> 

    var child = { 
     template: '#child', 
     data: function() { 
      return {} 
     } 
    }; 

    var parent = { 
     template: '#parent', 
     data: function() { 
      return {} 
     } 
    }; 

    new Vue({ 
     el: '#app', 
     components: { 
      'parent': parent, 
      'child': child 
     } 
    }) 
</script> 

サンプル：https://jsfiddle.net/05gc05sk/1/

どのように適切にネストコンポーネント？

Answer 1

あなたのコードでは、作業を行います。

あなただけの親コンポーネントに<slot>（Content Distribution with Slots）を追加します。

<template id='parent'> 
    <div> 
    parent component 
    <slot></slot> 
    </div> 
</template>