[vue.js] Как встроить компонент в компонент?

Question

[Tenebrius]

Допустим, хочу в результате получить такую структуру:

<!-- первый компонент - 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>

Так же допустим, я зарегистрировал эти три типа компонентов:

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

Как сделать, чтобы в компоненте parent был 1 компонент child в котором был массив компонентов grandchild?

Answer 1

[Evgeny Kulakov]

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

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