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