首頁  >  問答  >  主體

如何使用插槽建立輪播?

人們不斷向我展示使用圖像陣列創建輪播的相同方法。但這種方法不靈活,因為我希望輪播的每張投影片都包含一個燈箱組件。在這種情況下,我不想為我放入輪播數組中的圖像重寫燈箱的功能。那太好了嗎?編寫更少的程式碼並使 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粉817354783P粉817354783304 天前368

全部回覆(1)我來回復

  • P粉402806175

    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>
    

    回覆
    0
  • 取消回覆