squadbrodyaga
@squadbrodyaga
帆は風を変えた

Как добавить элементам, переданным в слот, индивидуальные обёртки?

Представим, что есть вот такой стандартный файл 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 сделать то, что мне нужно. Но как получить этот массив элементов?
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
через render-функцию

UPD. Вынесено из комментариев:

код же можно изменить под vue 3, да?

да
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы