如何让Vue轮播组件中的Slots逐个显示？

问题描述 #

我在自定义实现Vue轮播组件（Carousel）时，使用Slots来管理幻灯片内容，创建了主组件carousel.vue和子组件slide.vue。现在需要让添加到Carousel中的所有Slide逐个显示，后续拓展完整轮播功能，但不知道如何创建对应的幻灯片数组来用v-for控制显示。

现有代码如下：

carousel.vue #

<template>
    <div class="carousel">  
         <slot/>
    </div>
</template>
<script>
</script>

slide.vue #

<template>
    <div class="slide">
        <slot/>
    </div>
</template>
<script>
</script>

组件使用代码 #

<template>
  <Carousel>
    <Slide>Image</Slide>
    <Slide>Image</Slide>
    <Slide>Image</Slide>
  </Carousel>
</template>

<script setup>
  import Carousel from "../../components/Reusable components/Carousel.vue"
  import Slide from "../../components/Reusable components/Slide.vue"
</script>

<style>
</style>

解决方案 #

要实现逐个显示幻灯片，你可以通过Vue的useSlots API获取插槽内的Slide组件，配合响应式变量控制当前显示索引，具体步骤如下：

1. 修改Carousel组件，获取插槽并管理当前索引 #

更新carousel.vue代码，使用<script setup>语法：

<template>
  <div class="carousel">
    <!-- 遍历筛选后的Slide组件，只显示当前索引的幻灯片 -->
    <div 
      v-for="(slide, index) in slides" 
      :key="index"
      class="slide-wrapper"
      :class="{ active: index === currentIndex }"
    >
      <component :is="slide"></component>
    </div>

    <!-- 切换按钮 -->
    <button class="prev-btn" @click="prevSlide">←</button>
    <button class="next-btn" @click="nextSlide">→</button>
  </div>
</template>

<script setup>
import { ref, useSlots, computed } from 'vue'

// 获取插槽内容，筛选出Slide组件
const slots = useSlots()
const slides = computed(() => {
  // 过滤掉文本节点等非组件元素，只保留Slide组件
  return slots.default?.()?.filter(item => item.type.name === 'Slide') || []
})

// 当前显示的幻灯片索引
const currentIndex = ref(0)

// 切换到上一张
const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length
}

// 切换到下一张
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.value.length
}

// 可选：开启自动轮播
// setInterval(() => {
//   nextSlide()
// }, 3000)
</script>

<style scoped>
.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slide-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide-wrapper.active {
  opacity: 1;
  z-index: 1;
}

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: rgba(0,0,0,0.3);
  color: #fff;
  border-radius: 4px;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}
</style>

2. 为Slide组件添加名称标识 #

确保slide.vue的组件名称正确（否则上述筛选逻辑会失效），修改slide.vue的<script>部分：

<template>
  <div class="slide">
    <slot/>
  </div>
</template>

<script setup>
// 定义组件名称，用于Carousel中筛选
defineOptions({
  name: 'Slide'
})
</script>

<style scoped>
.slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-size: 24px;
}
</style>

关键说明 #

• 通过useSlots()获取默认插槽内容，用computed筛选出所有Slide组件，形成可遍历的幻灯片数组
• 用currentIndex响应式变量控制当前显示的幻灯片，结合active类实现显示/隐藏的过渡效果
• 切换逻辑使用取模运算实现循环轮播，避免索引越界
• 可按需开启自动轮播定时器，实现无手动操作的自动切换

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