<p><pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;div class=&quot;carousel&quot;&gt; &lt;slot&gt;&lt;/slot&gt; &lt;button @click=&quot;index++&quot;&gt;Next&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script setup&gt; import { useSlots, onMounted, onUpdated, ref} from 'vue'; const slots = useSlots() const index = ref(0) onMounted(() =&gt; { const defaultSlotElements = slots.default() console.log(`My default slot has ${defaultSlotElements.length} elements.`) }), onUpdated(() =&gt;{ console.log(defaultSlotElements[index]) } ) &lt;/script&gt;</pre> <p>我正在尝试创建基于插槽的轮播。感谢前一个关于堆栈溢出的人，他帮助我弄清楚了如何提取插槽数组。现在，我正在处理另一个问题。为了创建轮播，我必须以某种方式更改数组中元素的索引，这样我就可以移动到轮播的下一张幻灯片。后来我必须将它注入到我的幻灯片组件中，让 V-show 渲染默认为 0 的当前插槽。但是索引的值会被更改索引的 v-on 指令更改，因此它选择数组中的下一个或上一个槽。我知道我在 vue 中选择了一个复杂的主题，但我不想使用基于图像数组的更简单版本的轮播，因为我无法在其中添加另一个组件。</p> <p>事实证明，我不能简单地通过更改索引<code>arr[index]</code>来选择数组中的下一个对象。</p>

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

const slots = useSlots()
const index = ref(0)
const current = ref(null)
onMounted(() => {
  const defaultSlotElements = slots.default()
  current.value = defaultSlotElements[0]
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
    }
)  
const render = () => {
    return h('div', { class: 'carousel'}, [
    h('p', `My default slot has ${slots.default().length} elements.`),
    h('div', slots.default()[index.value]),
    h('p', `Picture ${ index.value + 1 }`),
    h('button', { onClick: () => { 
      index.value = index.value + 1 == slots.default().length ? 0 : index.value + 1
    } }, 'Next')
  ]);
};
</script>

<template>
    <render />
</template>