更改数组索引以显示下一张幻灯片

<template>
    <div class="carousel">
        
        <slot></slot>
         <button @click="index++">Next</button>
    </div>

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

const slots = useSlots()
const index = ref(0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotElements.length} elements.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

我正在尝试创建基于插槽的轮播。感谢前一个关于堆栈溢出的人，他帮助我弄清楚了如何提取插槽数组。现在，我正在处理另一个问题。为了创建轮播，我必须以某种方式更改数组中元素的索引，这样我就可以移动到轮播的下一张幻灯片。后来我必须将它注入到我的幻灯片组件中，让 V-show 渲染默认为 0 的当前插槽。但是索引的值会被更改索引的 v-on 指令更改，因此它选择数组中的下一个或上一个槽。我知道我在 vue 中选择了一个复杂的主题，但我不想使用基于图像数组的更简单版本的轮播，因为我无法在其中添加另一个组件。

事实证明我不能简单地通过改变索引arr[index]选择数组中的下一个对象。

如果你真的需要用插槽来做到这一点，那么你就必须这样做 与Vue渲染函数和 JSX https://vuejs.org/guide/extras/render-function.html

<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>

这是工作中的证监会游乐场 https://sfc.vuejs.org/#eNp9VG2P0zgQ/itWdNBW18ROU/p2DQhxh3QfQEiIT2Ql3GSSZtexLdvZFq363xknaenuAlXbZOyZZ+Z5ZuyH4K3W0X0LwSbY2tzU2hELrtWvM1k3WhlH3nGjWguClEY1ZBTR84IPG2VyS/s4jEDDQaMFd+Attz27okUI2nVTEWvyNAv2zmm7oRSODozkIsyVdCBdVLT5nf9VKspVQ+uWvmlT7/0iefti9h6/h8Mh0vURhHVc3EUSnF/UZwQ0Wi0ULyy+zVi8wAdb4l+ymrPjLF6w8P+GV2DD9wYg/FcdpPeObnX1skzjl1KVO3wgo3QOq5It53y1nEG8Zkues/Vsl7C8TJZrNk9ecZ6s+HqRFMVuXcxggQt8XiarGFZLNlsiiErrLlkWEPp7FTwlt4eDOlj3XUDH/CcjOvChyOYVZTGV3LUGwgLsnVM63HGUC4WWRRgv1rFn8ud0FbgDF0JzDcb2yc4mLVsh6JoWdEnnLFktHsNtL91Hc0uvuy23Xe3d4FTkwfd/D3W1dxsyZ0wf/8nkqZuWziuYBv18hQ3X0a1VEicQg7DiYQMl23gYgp8swFnz9k8Otsz9AN7aSJmK4ltkWunqBiKwTbgzKCUYBM6C6RUGxcV7MKEBWYAB8yfMJ67PcD0sMjohlesj8fuT9EDQ57NQzk6Jkh+wYQ4K//pFFygivhoop2R/Go6aP1+oWiZxDiyi+UiSXkDGk/NOjRUecQfDx+yymrcGa3fDusS+4tYl73g8IenrXuDev4CSt8J57P8ENBjqs3VZo2HPp0T3Hji656IFdPlF4Fd2g8pMUPoLuz7h0FCfUeGgC1WNfxXeMbrBbJlDiSfYvYFU3w1Meik/cwZlNpLsx6Oivh9NUedccGs3ZJQPfRmdpuRrnxm9NPp8+/D9XHdHkey5JX89PGEbCZCVw4bAUFj0zXMacPpsT0L60nttbq6cu6Sf6tyfXEzU92yQ8G8Sk9M18q51TsmOipLvRJ3fbc6EUQnvRB4BpM/g0medG7iQN4SRzVP/HvREUKfRR7yTR12jbyb+0OLv6o6/vuF9zHboiL8fHl0IwekHlpUmGQ==

UPDATE

渲染函数可以与自定义组件一起使用。

这是建立你的尝试<Carousel><Slide><Lightbox></Lightbox></Slide></Carousel结构。

证监会游乐场 https://sfc.vuejs.org/#eNqVVWtv2zgQ/CuEcK1tnCXKj/p1UoqihwIHXIsCRT/VAUpLK1kJRQokFbsI/N+7pCS/khZpEFtaajS7M9ylH713VRU81OCtvEgnqqgM0WDq6mYtirKSypD3TMlaAyeZkiXpBbRbsK/1jrAvvEjhiHHRJeD/It+ajdwfMd1CC4tokx8zY2CgrDgzYCMTdSkxIgRjR+8C+xcVZU60SuK1tzWm0itKYW9ACcb9RAoDwgRpndzbTy6DRJa0qOnbOrboV5N3r8Yf8H+32wVVsQeuDeP3gQBjF6uOAYO64pKlGu/G4WiGl3COX5PFNNyPR7PQ/69kOWj/gwLw/5U7YdHBXZW/zuLRayGzDV5QYDyFRRbOp2wxH8NoGc5ZEi7Hm0mYZJP5MpxO3jA2WbDlbJKmm2U6hhkusGk2WYxgMQ/HcySRceGSrT1CWx+ixvQXW2T1mi3s5E6bHxycLSe5tBVLUeobGo6oYKZW4Keg742s/A1DL3FTROqPZsuRlfmyWjB8WksOZsc4r1gFSjeVdCHNas7pkqZ0TqfhZDH7Xa7o2JwYRvS8iUTkZLq+zsmjbast2A5ckWkYVvt/1uLgmtChvKHXtK1fsiq401LggOBLWH/7AK1fWRqnycMWtvFJkc4S29d3OpAqp3gXqFqYooQAdOlvFLoOConX3vCMg+LiAyhfgUhBgfod5xX0Ca+lRUUHlHI+sb8e9EeCmC9cGj0kUnzEvTWQ2tuvVYom4q2CbEi2h3aC7diiazYPNo1GPvsuiY80/cHpWYFV7vEZUvTDs/WkVqjAtE8E7rV7eMzf7w9IfNMZ3aKDB8ZrwHdcxiCFjNXc9AffwlunGilOGRqDEHzBpFC7EmTb76XFQ2+I4hPOtF6RXtKa1TsMybdufhBXIer7xx+kzeZyky3T5K/HqzICDiI36BNwKLFcHXwftLvsmJqM17U7hxpltxdwl/hzkdj5w2SNla0Ff5MROVyyb2pjpHCSpHjPi+R+1UknHYxckMRPKOMn1raayFsSktU1vqM9EPSs9wkP357bRUJuB3au8HN2up+f7Tiyzf7cuBlwI9wuXA0wtvHxR+WZHkZFf/wzc1UIbkvTBHgwaZtq7XVHTMdxOk+tPTfIZS/dOXSBiijyXYpACefFPKPiZcXxlsTVtzbPVPNc8sNPPMSfcA==

我没有看到任何其他方法来构建你想要的东西default slot并且不使用render功能。