[vue.js] How to embed a component within a component?

Question

Vue.js

Let's say I want to get the following structure as a result:

<!-- первый компонент - parent -->
<div id='parent'>
<h1>Title</h1>

<!-- второй компонент - child -->
<ul id='child'>

<!-- несколько третьих компонентов - grandchild -->
<li class='grandchild'><span>smth</span></li>
<li class='grandchild'><span>smth</span></li>
<li class='grandchild'><span>smth</span></li>

</ul>

</div>

Also, let's say I registered these three component types:

Vue.component('parent', {/* code */});
Vue.component('child', {/* code */});
Vue.component('grandchild', {/* code */});

How to make the parent component have 1 child component which has an array of grandchild components ?

Answer 1

// child template
<template>
<ul>
<slot></slot>
</ul>
</template>

<parent>
<child>
  <granchild  v-for="item in items"></grandchild>
</child>
</parent>