슬롯을 사용하여 캐러셀을 만드는 방법은 무엇입니까?

Question

사람들은 일련의 이미지를 사용하여 캐러셀을 만드는 동일한 방법을 계속 보여줍니다. 그러나 캐러셀의 각 슬라이드에 라이트박스 구성 요소가 포함되기를 원하기 때문에 이 접근 방식은 융통성이 없습니다. 이 경우 캐러셀 배열에 넣은 이미지에 대한 라이트박스 기능을 재정의하고 싶지 않습니다. 정말 좋지 않나요? 코드를 적게 작성하고 Vue.js의 재사용 가능한 구성 요소를 그 어느 때보다 유용하게 만드세요.

슬롯 활용의 정말 좋은 예를 찾았습니다. GitHub의 SSENSE가 만든 Vue Carousel. 그다지 능숙하지 않은 웹 개발자로서 나는 그가 각 슬라이드에 슬롯을 표시하는 방법을 여전히 이해하지 못합니다. 템플릿입니다

으아아아

보시다시피 상위 구성요소 캐러셀과 하위 구성요소 슬라이드쇼가 있습니다. 나에게 가장 어려운 부분은 캐러셀의 기능을 생성하기 위해 인덱스, 금액 등과 같은 일부 데이터를 추출하는 방법을 파악하는 것이었습니다. 이미지 배열로 캐러셀을 만드는 것이 훨씬 간단하다는 데 동의합니다. 하지만 이 접근 방식에서는 캐러셀 내에서 다른 구성 요소를 사용할 수 없습니다.

내가 원하는 것은 무엇인가요? 이 경우 슬라이드되는 각 슬롯의 인덱스를 어떻게든 추출하고 인덱스를 변경하여 캐러셀에 대한 함수를 쉽게 만들 수 있습니다. 슬롯이 있는 캐러셀을 생성하는 방법에는 여러 가지가 있다고 생각합니다. 하지만 저는 아직 Vue와 JavaScript의 모든 개념을 잘 이해하지 못하므로 이 문제를 해결하는 다른 방법을 알려주실 수 있나요?

Answer 1

옵션 API에서 setup 函数的 slots 参数访问组件中的槽元素（也可与 useSlots() 组件一起使用，它相当于 this.$slots를 사용할 수 있습니다.

그러면 얼마나 많은 요소가 포함되어 있는지 알 수 있습니다.

으아악