Wie erstelle ich ein Karussell mit Slots?

Question

Die Leute zeigen mir immer wieder, wie man aus einer Reihe von Bildern ein Karussell erstellt. Dieser Ansatz ist jedoch unflexibel, da ich möchte, dass jede Folie des Karussells eine Lightbox-Komponente enthält. In diesem Fall möchte ich die Funktionalität der Lightbox für die Bilder, die ich in das Karussell-Array einfüge, nicht außer Kraft setzen. Ist das nicht toll? Schreiben Sie weniger Code und machen Sie wiederverwendbare Komponenten in Vue.js nützlicher als je zuvor.

Ich habe ein wirklich gutes Beispiel für die Verwendung von Slots gefunden. Vue Carousel von SSENSE auf GitHub. Als nicht sehr erfahrener Webentwickler verstehe ich immer noch nicht, wie er es geschafft hat, dass auf jeder Folie ein Slot angezeigt wird. Dies ist eine Vorlage

<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

Wie Sie sehen können, haben wir ein Karussell für übergeordnete Komponenten und eine Diashow für untergeordnete Komponenten. Der schwierigste Teil für mich war herauszufinden, wie ich einige Daten daraus extrahieren kann, wie Index, Menge usw., um die Funktionalität des Karussells zu erstellen. Ich stimme zu, dass es viel einfacher ist, ein Karussell mit einer Reihe von Bildern zu erstellen, aber dieser Ansatz erlaubt es uns nicht, eine andere Komponente innerhalb des Karussells zu verwenden.

Was will ich? Ich möchte irgendwie den Index jedes Slots extrahieren, der in diesem Fall verschoben wird, und kann dann einfach eine Funktion für das Karussell erstellen, indem ich den Index ändere. Ich denke, es gibt verschiedene Wege, Karussells mit Slots zu erstellen, aber ich verstehe immer noch nicht alle Konzepte von Vue und JavaScript. Können Sie mir also verschiedene Möglichkeiten nennen, dieses Problem zu lösen?

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>