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

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

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

да
Ответ написан
@molekulyarniy
App.vue
<template>
  <MyComponent :blocksInfo="blocks"> </MyComponent>
</template>

<script>
import MyComponent from "./components/MyComponent";

export default {
  name: "App",
  components: {
    MyComponent,
  },
  data() {
    return {
      blocks: [
        {
          name: "Блок 1",
        },
        {
          name: "Блок 2",
        },
        {
          name: "Блок 3",
        },
        {
          name: "Блок 4",
        },
        {
          name: "Блок 5",
        },
      ],
    };
  },
};
</script>


MyComponent.vue
<template>
  <div>
    <div v-for="block in blocksInfo" :key="block.name" class="block-wrapper">
      <div>{{ block.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: ["blocksInfo"],
};
</script>

<style scoped>
.block-wrapper {
  background: orange;
  margin: 5px;
}
</style>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы