如何在Vue模板循环中渲染插槽元素为Swiper Slide？

要将插槽中传入的每个<div>内容渲染到<swiper-slide>中，你可以利用Vue的<component>组件直接渲染插槽返回的VNode对象，具体修改如下：

修改后的MyCarousel.vue代码 #

<script setup>
import { useSlots } from "vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const slots = useSlots();
</script>

<template>
    <div>
        <swiper>
            <swiper-slide v-for="(slideVnode, key) in slots.slides()" :key="key">
                <!-- 直接渲染插槽返回的VNode -->
                <component :is="slideVnode" />
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
</style>

原理说明 #

• useSlots().slides()返回的是插槽内容对应的VNode数组，每个元素对应你在Blade视图中传入的<div>节点。
• Vue的<component :is="vnode"语法可以直接渲染VNode对象，既能完整保留原插槽元素的结构、样式和内容，又能将其包裹在<swiper-slide>中。

这种方式既满足了“仅在Vue组件包裹时转换为swiper-slide”的需求，又不需要在Blade中直接引入Swiper相关代码。

内容的提问来源于stack exchange，提问作者Ric