Vue插槽实现轮播：切换数组索引显示下一张幻灯片的问题

原代码的核心问题 #

1. defaultSlotElements 是onMounted回调里的局部变量，onUpdated根本访问不到它，控制台会直接报错。
2. 直接修改index后，原模板里的<slot></slot>会渲染所有插槽元素，没有任何显示控制逻辑——所有元素一直处于显示状态，自然看不到切换效果。

修正后的完整实现代码 #

<template>
  <div class="carousel">
    <!-- 遍历插槽元素，根据当前index控制显示 -->
    <div 
      v-for="(slotEl, idx) in slotElements" 
      :key="idx"
      v-show="idx === index"
    >
      <component :is="slotEl" />
    </div>
    <button @click="nextSlide">Next</button>
  </div>
</template>

<script setup>
import { useSlots, ref, onMounted, onUpdated } from 'vue';

const slots = useSlots();
const index = ref(0);
const slotElements = ref([]);

// 更新插槽元素数组的通用方法
const updateSlotElements = () => {
  const defaultSlot = slots.default?.() || [];
  // 过滤掉插槽里的空文本节点（比如换行、空格）
  slotElements.value = defaultSlot.filter(el => el.type !== Text);
};

onMounted(() => {
  updateSlotElements();
  console.log(`默认插槽有 ${slotElements.value.length} 个有效元素`);
});

onUpdated(() => {
  updateSlotElements(); // 同步插槽内容更新后的元素列表
});

// 切换下一张，处理边界（到最后一张自动回到开头）
const nextSlide = () => {
  index.value = (index.value + 1) % slotElements.value.length;
  console.log(`当前显示第 ${index.value} 个插槽元素`);
};
</script>

关键逻辑说明 #

• 变量作用域修正：把slotElements定义为全局ref变量，让onMounted和onUpdated都能访问并更新它，解决原代码的作用域问题。
• 显示控制：通过v-for遍历插槽元素数组，用v-show="idx === index"控制仅当前索引的元素显示，其他隐藏；用<component :is="slotEl" />是Vue中动态渲染VNode的标准方式。
• 边界处理：nextSlide里用取模运算，避免索引越界，实现循环轮播。
• 无效节点过滤：过滤插槽里的空文本节点，只保留有效组件/元素，避免轮播计数错误。

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