人們不斷向我展示使用圖像陣列創建輪播的相同方法。但這種方法不靈活，因為我希望輪播的每張投影片都包含一個燈箱組件。在這種情況下，我不想為我放入輪播數組中的圖像重寫燈箱的功能。那太好了嗎？編寫更少的程式碼並使 Vue.js 中的可重複使用元件比以往更有用。
我發現了一個使用插槽的非常好的例子。 GitHub 上 SSENSE 的 Vue Carousel。作為一個不太精通網頁開發人員，我仍然不明白他是如何讓每張投影片顯示一個插槽的。這是一個模板
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
<slide>
Slide 1 Content
</slide>
<slide>
Slide 2 Content
</slide>
</carousel>
如您所見，我們有一個父元件輪播和子元件投影片。對我來說最困難的部分是弄清楚如何從中提取一些數據，例如索引、金額等，以創建輪播的功能。我同意用圖像數組創建輪播要簡單得多，但這種方法不允許我們在輪播中使用另一個組件。
我想要什麼？我想以某種方式提取在這種情況下滑動的每個插槽的索引，然後我可以透過更改索引輕鬆地為輪播建立功能。我認為用槽創建輪播有不同的路徑，但我仍然不太理解 Vue 和 JavaScript 的所有概念，所以你可以告訴我解決這個問題的不同方法。
您可以使用
setup函數的slots參數存取元件中的插槽元素（也可與useSlots()元件一起使用，它相當於this.$slots在選項API 中）。然後就可以知道它包含了多少個元素。
<script setup> const slots = useSlots() onMounted(() => { const defaultSlotElements = slots.default() console.log(`My default slot has ${defaultSlotsElements.length} elements.`) }) </script>