人們不斷向我展示使用圖像陣列創建輪播的相同方法。但這種方法不靈活,因為我希望輪播的每張投影片都包含一個燈箱組件。在這種情況下,我不想為我放入輪播數組中的圖像重寫燈箱的功能。那太好了嗎?編寫更少的程式碼並使 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 的所有概念,所以你可以告訴我解決這個問題的不同方法。
P粉4028061752024-01-11 12:39:29
您可以使用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>