<p><pre class="brush:php;toolbar:false;"><template> <div class="karusel"> <slot></slot> <butang @klik="index++">Seterusnya</button> </div> </template> <persediaan skrip> import { useSlots, onMounted, onUpdated, ref} daripada 'vue'; slot const = useSlots() indeks const = ref(0) onMounted(() => { const defaultSlotElements = slots.default() console.log(`Slot lalai saya mempunyai elemen ${defaultSlotElements.length}.`) }), onUpdated(() =>{ console.log(defaultSlotElements[index]) } ) </script></pre> <p>Saya cuba mencipta karusel berasaskan slot. Terima kasih kepada lelaki terdahulu di Stack Overflow yang membantu saya memikirkan cara mengekstrak tatasusunan slot. Sekarang, saya sedang menghadapi masalah lain. Untuk mencipta karusel, saya perlu menukar indeks elemen dalam tatasusunan supaya saya boleh beralih ke slaid seterusnya karusel. Saya kemudiannya terpaksa menyuntik ini ke dalam komponen tayangan slaid saya agar V-show memberikan slot semasa yang lalai kepada 0. Tetapi nilai indeks diubah oleh arahan v-on yang mengubah indeks, jadi ia memilih slot seterusnya atau sebelumnya dalam tatasusunan. Saya tahu saya telah memilih tema kompleks dalam vue, tetapi saya tidak mahu menggunakan versi karusel yang lebih ringkas berdasarkan susunan imej, kerana saya tidak boleh menambah komponen lain di dalamnya. </p> <p>Ternyata saya tidak boleh memilih objek seterusnya dalam tatasusunan hanya dengan menukar indeks <kod>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>