다음 슬라이드를 표시하도록 배열 인덱스 변경

Question

<템플릿>
    

        
        <슬롯>
         <버튼 @click="index++">다음
    


<스크립트 설정>
'vue'에서 { useSlots, onMounted, onUpdated, ref} 가져오기;

const 슬롯 = useSlots()
const 인덱스 = 참조(0)
onMounted(() => {
  const defaultSlotElements = Slots.default()
  console.log(`내 기본 슬롯에는 ${defaultSlotElements.length}개의 요소가 있습니다.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[색인])
}
)


슬롯 기반 캐러셀을 만들려고 합니다. 슬롯 배열을 추출하는 방법을 알아내는 데 도움을 준 이전 Stack Overflow 담당자에게 감사드립니다. 이제 또 다른 문제를 다루고 있습니다. 회전판을 만들려면 회전판의 다음 슬라이드로 이동할 수 있도록 배열에 있는 요소의 인덱스를 어떻게든 변경해야 합니다. 나중에 V-show가 기본값이 0인 현재 슬롯을 렌더링하도록 하기 위해 이것을 내 슬라이드쇼 구성 요소에 삽입해야 했습니다. 그러나 인덱스를 변경하는 v-on 명령어에 의해 인덱스 값이 변경되므로 배열의 다음 또는 이전 슬롯을 선택합니다. vue에서 복잡한 테마를 선택했다는 것을 알고 있지만 이미지 배열을 기반으로 하는 간단한 버전의 캐러셀을 사용하고 싶지 않습니다. 그 안에 다른 구성 요소를 추가할 수 없기 때문입니다. 
인덱스 arr[index]를 변경하는 것만으로는 배열의 다음 개체를 선택할 수 없다는 사실이 밝혀졌습니다. 
            

Answer 1

슬롯으로 이 작업을 꼭 해야 한다면 이렇게 해야 합니다. Vue render 함수 및 JSX

사용 으아악

이것이 일이다SFC 놀이터

업데이트

렌더링 기능은 사용자 정의 구성 요소와 함께 사용할 수 있습니다.

여기서 구조물을 만들어 보세요.

SFC 놀이터

默认插槽而不是使用render 함수를 사용하여 원하는 것을 만드는 다른 방법은 없습니다.