使用Vue插槽元素在模板循環中進行渲染

Question

我正在嘗試透過使用插槽將投影片的HTML傳遞給一個元件，然後將它們渲染為另一個元件

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

MyCarousel 然後將每個 <div> 轉換為 Swiper 投影片。

我可以使用 slots.slides() 迴圈來傳遞到插槽中的元素。我的問題是，如何在 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>

我知道我可以直接在 Blade 視圖中使用 Swiper，但我正在嘗試避免這樣做，只有在包裝在 Vue 元件中時才將投影片轉換為 。其餘時間它將使用普通的 HTML。

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>