如何使用插槽建立輪播？

Question

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

Answer 1

您可以使用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>