画像の配列を使用してカルーセルを作成する同じ方法を人々が私に教え続けます。しかし、カルーセルの各スライドにライトボックス コンポーネントを含めたいので、このアプローチは柔軟性に欠けます。この場合、カルーセル配列に配置した画像のライトボックスの機能をオーバーライドしたくありません。それは素晴らしいことではありませんか？記述するコードが減り、Vue.js の再利用可能なコンポーネントがこれまで以上に便利になります。
スロットを使用した非常に良い例を見つけました。 GitHub 上の SSENSE による Vue Carousel。 Web 開発にあまり熟練していない私には、彼がどのようにして各スライドにスロットを表示させたのか、まだ理解できません。これはテンプレートです
リーリーご覧のとおり、親コンポーネントのカルーセルと子コンポーネントのスライドショーがあります。私にとって最も困難だったのは、カルーセルの機能を作成するためにインデックスや金額などのデータを抽出する方法を理解することでした。画像の配列を使用してカルーセルを作成する方がはるかに簡単であるという意見には同意しますが、このアプローチではカルーセル内で別のコンポーネントを使用できません。
＃＃＃私が欲しいものは？この場合、スライドする各スロットのインデックスを何らかの方法で抽出したいと思います。インデックスを変更することで、カルーセルの関数を簡単に作成できます。スロットを使用してカルーセルを作成するにはさまざまな方法があると思いますが、Vue と JavaScript の概念をすべて完全には理解していないので、この問題を解決するさまざまな方法を教えていただけますか。
P粉4028061752024-01-11 12:39:29
setup 関数の slots パラメータを使用して、コンポーネント内のスロット要素にアクセスできます (useSlots() コンポーネントでも使用されます。これは同等です)オプション API の ##this.$slots に)。
そうすれば、それに含まれる要素の数がわかります。