如何在 Vue 模板循环中正确渲染具名插槽的子元素

本文讲解如何在 vue 3 组合式 api 中，通过 `useslots()` 获取具名插槽内容，并在 `v-for` 循环中逐个渲染每个插槽节点为 swiperslide 的子内容，核心是使用 `node”>` 动态组件语法。

在构建可复用的 vue 轮播组件（如封装 Swiper）时，常需兼顾灵活性与语义化：既允许用户在 Blade 模板中以原生 html 方式编写幻灯片内容（便于 seo 和服务端渲染），又能在 Vue 层自动将其转换为 Swiper 所需的 结构。关键难点在于——如何将插槽返回的 Vnode 数组（如 slots.slides()）中每个独立节点，准确、无损地渲染到循环生成的 内部？

答案是：使用 。Vue 允许将 VNode 直接作为 :is 的值传入 ，从而实现动态挂载原始插槽内容。注意，slots.slides() 返回的是一个函数，调用后得到的是 VNode 数组（而非单个根节点），因此需配合 v-for 遍历：

⚠️ 重要注意事项：

• slots.slides 是一个函数，必须显式调用 slots.slides() 才能获取 VNode 数组；直接写 slots.slides 会报错。
• 若插槽未提供内容，slots.slides() 可能返回 undefined，建议添加空数组回退：slots.slides?.() || []。
• 仅适用于单个 VNode；若插槽内存在多个同级根节点（如
  1
  2

  ），Vue 会自动将其包裹为 Fragment，此时 slide 实际是一个 Fragment VNode，仍可被正常渲染。

• 不要尝试用 v-html 或 innerHTML —— 这会丢失响应式、事件绑定及组件上下文，且存在 xss 风险。

该方案实现了「HTML 优先」的设计哲学：Blade 中保持简洁语义化结构，Vue 层专注增强交互，无需侵入式修改模板，也避免了在多处重复引入 Swiper 逻辑。最终，你的轮播组件既能无缝集成于 laravel 视图，又能完整继承 Swiper 的所有功能（如懒加载、分页器、手势支持等）。

立即学习“前端免费学习笔记（深入）”；