Ändern Sie den Array-Index, um die nächste Folie anzuzeigen

Question

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

</template>
<Skript-Setup>
import { useSlots, onMounted, onUpdated, ref} from 'vue';

const slots = useSlots()
const index = ref(0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`Mein Standard-Slot hat ${defaultSlotElements.length}-Elemente.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

Ich versuche, ein Slot-basiertes Karussell zu erstellen. Vielen Dank an den vorherigen Mann von Stack Overflow, der mir geholfen hat, herauszufinden, wie ich das Slots-Array extrahieren kann. Jetzt habe ich es mit einem anderen Problem zu tun. Um das Karussell zu erstellen, muss ich irgendwie den Index der Elemente im Array ändern, damit ich zur nächsten Folie des Karussells wechseln kann. Ich musste dies später in meine Diashow-Komponente einfügen, damit V-Show den aktuellen Slot rendert, der standardmäßig auf 0 steht. Der Wert des Index wird jedoch durch den v-on-Befehl geändert, der den Index ändert, sodass er den nächsten oder vorherigen Steckplatz im Array auswählt. Ich weiß, dass ich in Vue ein komplexes Thema ausgewählt habe, aber ich möchte keine einfachere Version eines Karussells basierend auf einer Reihe von Bildern verwenden, da ich keine weitere Komponente darin hinzufügen kann.

Es stellt sich heraus, dass ich das nächste Objekt im Array nicht einfach durch Ändern des Index arr[index] auswählen kann.

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函数来构建您想要的内容。