Rendering in a template loop using Vue slot elements

Question

I'm trying to pass the slideshow's HTML to a component and then render them into another component by using slots

// carousel.blade.php
<my-carousel>
<template v-slot:slides>
    <div>slide 1</div>
    <div>slide 2</div>
</template>
</my-carousel>

MyCarousel Then convert each <div> to a Swiper slide.

I can use slots.slides() to loop over the elements passed into the slots. My question is, how can I render the content of that element inside a swiper-slide?

// MyCarousel.vue
<script setup>
import { useSlots } from "vue";

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const slots = useSlots();

console.log(slots.slides());
</script>

<template>
    <div>
        <swiper>
            <swiper-slide v-for="(slide, key) in slots.slides()">
                <!-- 渲染当前幻灯片/插槽内容 -->
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
</style>

I know I can use Swiper directly in the Blade view, but I'm trying to avoid doing that and only transition the slide to when wrapped in a Vue component. The rest of the time it will use plain HTML.

Answer 1

Typical situation, I searched for a long time before I found the solution after posting. And it's very simple.

Each slide in the loop can be rendered as a dynamic <component>

<script setup>
import { useSlots } from "vue";

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const slots = useSlots();

console.log(slots.slides());
</script>

<template>
    <div>
        <swiper>
            <swiper-slide v-for="(slide, key) in slots.slides()" v-bind="props">
                <component :is="slide" />
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
</style>