Rendern in einer Vorlagenschleife mit Vue-Slot-Elementen

Question

Ich versuche, den HTML-Code der Folien an eine Komponente zu übergeben und sie dann mithilfe von Slots in einer anderen Komponente zu rendern

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

MyCarousel 然后将每个 <div> In Swiper-Diashow konvertieren.

Ich kann slots.slides() verwenden, um die in den Slot übergebenen Elemente zu durchlaufen. Meine Frage ist, wie kann ich den Inhalt dieses Elements in einem Swiper-Slide rendern?

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

Ich weiß, dass ich Swiper direkt in der Blade-Ansicht verwenden kann, aber ich versuche das zu vermeiden und konvertiere die Folie nur in , wenn sie in eine Vue-Komponente eingebunden ist. In der restlichen Zeit wird reines HTML verwendet.

Answer 1

典型的情况，我在发帖后找了很久才找到解决方案。而且它非常简单。

循环中的每个slide都可以呈现为动态的<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>