本文讲解如何在 vue 3 组合式 api 中，通过 `useslots()` 获取具名插槽内容，并在 `v-for` 循环中逐个渲染每个插槽节点为 swiperslide 的子内容，核心是使用 `
在构建可复用的 Vue 轮播组件（如封装 Swiper）时，常需兼顾灵活性与语义化：既允许用户在 Blade 模板中以原生 HTML 方式编写幻灯片内容（便于 SEO 和服务端渲染），又能在 Vue 层自动将其转换为 Swiper 所需的 <swiper-slide> 结构。关键难点在于——如何将插槽返回的 VNode 数组（如 slots.slides()）中每个独立节点，准确、无损地渲染到循环生成的 <swiper-slide> 内部？
答案是：使用 <component :is="vnode">。Vue 允许将 VNode 直接作为 :is 的值传入 <component>，从而实现动态挂载原始插槽内容。注意，slots.slides() 返回的是一个函数，调用后得到的是 VNode 数组（而非单个根节点），因此需配合 v-for 遍历：
<script setup>
import { useSlots } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
const slots = useSlots()
</script>
<template>
<div class="carousel-wrapper">
<swiper>
<!-- 注意：slots.slides() 必须加括号调用 -->
<swiper-slide
v-for="(slide, index) in slots.slides?.() || []"
:key="index"
>
<!-- ✅ 正确方式：用 <component :is> 渲染每个 VNode -->
<component :is="slide" />
</swiper-slide>
</swiper>
</div>
</template>⚠️ 重要注意事项：
- slots.slides 是一个函数，必须显式调用 slots.slides() 才能获取 VNode 数组；直接写 slots.slides 会报错。
- 若插槽未提供内容，slots.slides() 可能返回 undefined，建议添加空数组回退：slots.slides?.() || []。
- <component :is="slide"> 仅适用于单个 VNode；若插槽内存在多个同级根节点（如 <div>1</div><div>2</div>），Vue 会自动将其包裹为 Fragment，此时 slide 实际是一个 Fragment VNode，仍可被正常渲染。
- 不要尝试用 v-html 或 innerHTML —— 这会丢失响应式、事件绑定及组件上下文，且存在 XSS 风险。
该方案实现了「HTML 优先」的设计哲学：Blade 中保持简洁语义化结构，Vue 层专注增强交互，无需侵入式修改模板，也避免了在多处重复引入 Swiper 逻辑。最终，你的轮播组件既能无缝集成于 Laravel 视图，又能完整继承 Swiper 的所有功能（如懒加载、分页器、手势支持等）。
立即学习“前端免费学习笔记（深入）”；
