Представим, что есть вот такой стандартный файл App.vue
<template>
<MyComponent>
// внутри компонента MyComponent мы вставляем N-ое количество блоков:
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
...
<div>Блок N</div>
</MyComponent>
</template>
И в компоненте «MyComponent» это выглядит примерно вот так:
<template>
<div class="block-wrapper">
<slot/>
</div>
</template>
// Итоговый результат будет такой:
<template>
<div class="block-wrapper">
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
...
<div>Блок N</div>
</div>
</template>
Как видим, все блоки поместились внутрь тега блока с классом «block-wrapper».
Но можно ли сделать так, чтобы конечный результат был вот таким:
<template>
// Блок с классом block-wrapper оборачивает каждый блок по отдельности
<div class="block-wrapper">
<div>Блок 1</div>
</div>
<div class="block-wrapper">
<div>Блок 2</div>
</div>
<div class="block-wrapper">
<div>Блок 3</div>
</div>
...
<div class="block-wrapper">
<div>Блок N</div>
</div>
</template>
Получается, тут как-то нужно получить массив элементов, которые разместились внутри «MyComponent»
и с помощью v-for сделать то, что мне нужно. Но как получить этот массив элементов?