本文介绍如何在 vue 3 组合式 api 中，将具名插槽（如 `v-slot:slides`）传入的多个独立 vnode 动态渲染到 swiperslide 组件内，核心是利用 `` 实现插槽内容的透传与逐项挂载。

在构建可复用轮播组件（如 MyCarousel）时，常需兼顾灵活性与封装性：既允许父组件以原生 HTML 形式声明幻灯片内容（便于 Blade 模板集成），又能在 Vue 层自动将其转换为 Swiper 所需的 结构。关键挑战在于——插槽返回的是一个 VNode 数组（而非字符串或 DOM 元素），而 v-for 遍历后每个 slide 是一个完整的 VNode 对象，不能直接写入模板作为 HTML 字符串，也不能用 v-html 渲染。

正确解法是使用内置的 标签配合 :is 动态绑定：

<template>
  <div>
    <swiper>
      <swiper-slide 
        v-for="(slide, index) in slots.slides()" 
        :key="index"
      >
        <component :is="slide" />
      </swiper-slide>
    </swiper>
  </div>
</template>

✅ 这里 :is="slide" 并非传入组件名字符串，而是直接绑定 Vue 编译后的 VNode 实例——Vue 会自动将其“挂载”并渲染为真实 DOM 子树。这是 Vue 3 插槽高级用法的标准实践，适用于任何需要解构、重组插槽内容的场景。

⚠️ 注意事项：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

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

• slots.slides() 返回的是函数，调用后才得到 VNode 数组，因此 v-for 中必须写 slots.slides()（带括号）；
• 每个 slide 是独立 VNode，自带响应式上下文，无需额外 h() 或 createVNode 封装；
• 若插槽内容含响应式数据或事件监听器（如
  ），它们将完整保留并正常工作；
• 建议为 v-for 添加 :key="index"（或更优的唯一标识），避免 VNode 复用导致状态错乱；
• 不要尝试用 v-html 或 innerHTML 处理 slide，这将丢失响应式与事件绑定，且存在 XSS 风险。

最终，你的 Blade 模板保持简洁语义化：

<my-carousel>
  <template v-slot:slides>
    <div class="slide">Slide 1 — <button @click="log('one')">Log</button></div>
    <div class="slide">Slide 2 — {{ currentTime }}</div>
  </template>
</my-carousel>

所有交互逻辑、响应式更新和生命周期钩子均原样生效——这就是 Vue 插槽 + 动态组件协同带来的强大抽象能力。