更改數組索引以顯示下一張投影片

Question

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

</template>
<script setup>
import { useSlots, onMounted, onUpdated, ref} 從 '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]來選擇數組中的下一個物件。

Answer 1

如果你真的需要用插槽來做到這一點，那麼你就必須這麼做 使用 Vue 渲染函數和 JSX

#

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

這是工作證監會遊樂場

更新

渲染函數可以與自訂元件一起使用。

這裡嘗試建立您的 結構。

SFC 遊樂場

我沒有看到任何其他方法可以使用預設插槽而不是使用render函數來建立您想要的內容。