Bagaimana untuk membuat karusel menggunakan slot?

Question

Orang ramai terus menunjukkan kepada saya cara yang sama untuk membuat karusel menggunakan pelbagai imej. Tetapi pendekatan ini tidak fleksibel kerana saya mahu setiap slaid karusel mengandungi komponen peti cahaya. Dalam kes ini, saya tidak mahu mengatasi kefungsian peti cahaya untuk imej yang saya masukkan ke dalam tatasusunan karusel. Hebat kan? Tulis kurang kod dan jadikan komponen boleh guna semula dalam Vue.js lebih berguna berbanding sebelum ini.

Saya dapati contoh yang sangat baik untuk menggunakan slot. Vue Carousel oleh SSENSE di GitHub. Sebagai pembangun web yang tidak begitu mahir, saya masih tidak faham bagaimana dia mendapat setiap slaid untuk memaparkan slot. Ini adalah templat

<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

Seperti yang anda lihat, kami mempunyai karusel komponen induk dan tayangan slaid komponen anak. Bahagian yang paling sukar bagi saya ialah memikirkan cara untuk mengekstrak beberapa data daripadanya, seperti indeks, jumlah, dll., untuk mencipta kefungsian karusel. Saya bersetuju bahawa adalah lebih mudah untuk mencipta karusel dengan pelbagai imej, tetapi pendekatan ini tidak membenarkan kami menggunakan komponen lain dalam karusel.

Apa yang saya mahu? Saya entah bagaimana mahu mengekstrak indeks setiap slot yang meluncur dalam kes ini dan kemudian saya boleh mencipta fungsi untuk karusel dengan mudah dengan menukar indeks. Saya rasa terdapat laluan berbeza untuk mencipta karusel dengan slot, tetapi saya masih tidak begitu memahami semua konsep Vue dan JavaScript, jadi bolehkah anda memberitahu saya cara berbeza untuk menyelesaikan masalah ini.

Answer 1

Anda boleh menggunakan setup 函数的 slots 参数访问组件中的槽元素（也可与 useSlots() 组件一起使用，它相当于 this.$slotsdalam API pilihan).

Kemudian anda boleh tahu berapa banyak unsur yang terkandung di dalamnya.

<script setup>
const slots = useSlots()

onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotsElements.length} elements.`)
})
</script>