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?