Memaparkan dalam gelung templat menggunakan elemen slot Vue

Question

Saya cuba menghantar HTML slaid ke komponen dan kemudian menjadikannya komponen lain dengan menggunakan slot

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

MyCarousel 然后将每个 <div> Tukar kepada tayangan slaid Swiper.

Saya boleh menggunakan slots.slides() untuk melingkari elemen yang dihantar ke dalam slot. Soalan saya ialah, bagaimana saya boleh memaparkan kandungan elemen ini di dalam slaid swiper?

// 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>

Saya tahu saya boleh menggunakan Swiper terus dalam paparan Blade, tetapi saya cuba mengelak daripada melakukan perkara itu dan hanya menukar slaid kepada apabila dibalut dengan komponen Vue. Selebihnya ia akan menggunakan HTML biasa.

Answer 1

Situasi biasa, saya mencari untuk masa yang lama sebelum saya menemui penyelesaian selepas dipos. Dan ia sangat mudah.

Setiap slide都可以呈现为动态的<component>

dalam gelung

<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>