vue slot 예제

이는 이전 Button 예제와 크게 다르지 않습니다. 위의 예제에서 간단한 슬롯을 범위 슬롯으로 변환하는 미묘한 차이가 있습니다. 차이점은 태그에 전달되는 :item 특성에 있습니다. Vue의 슬롯은 완전히 새로운 수준으로 구성 요소 기반 개발을 가지고, 나는 슬롯을 사용할 수있는 좋은 방법을 많이 시연한 동안, 거기에 수많은 더있다. 어떤 좋은 아이디어를 생각할 수 있습니까? 슬롯이 업그레이드를 받을 수 있는 방법은 무엇이라고 생각하십니까? 아이디어가 있는 경우 Vue 팀에 아이디어를 가져와야 합니다. 하나님은 축복과 행복 코딩. 슬롯에 전달되는 데이터에 액세스하려면 v-slot 지시문 값과 함께 범위 변수의 이름을 지정합니다. 여러 슬롯을 두는 것이 유용한 경우가 있습니다. 예를 들어 다음 템플릿이 있는 구성 요소에서 위의 예제를 조각으로 나누겠습니다. 먼저, 우리는 다음과 같이 보이는 List.vue 구성 요소를 만들었습니다: 우리는 렌더링이없는 구성 요소에 대한 몇 가지약속을 전달합니다. 완료되기를 기다리는 동안 « 작업 중… »이라는 표시가 표시됩니다. 보류 중인 슬롯 덕분에.

성공하면 « Resolved: » 및 해결 값이 표시됩니다. 실패하면 « 거부됨: »과 거부를 일으킨 오류가 표시됩니다. 이제 해당 부품이 자체 재사용 가능한 구성 요소로 당겨지므로 이 구성 요소 내에서 약속 상태를 더 이상 추적할 필요가 없습니다. 당신이 물어 다행! 범위가 조정된 슬롯을 사용하면 렌더링된 요소 대신 템플릿을 슬롯에 전달할 수 있습니다. 템플릿이 상위 구성 요소 범위에서 렌더링되는 경우에도 특정 자식 구성 요소 데이터에 액세스할 수 있으므로 범위가 있는 슬롯이라고 합니다. 이를 통해 템플릿을 부모 구성 요소의 사용자 지정 콘텐츠로 채울 수 있습니다. 이 것을 더 단축 할 수 있습니다. 지정되지 않은 콘텐츠가 기본 슬롯에 대한 것으로 가정되는 것처럼 인수가 없는 v-슬롯은 기본 슬롯을 참조하는 것으로 간주됩니다: 부모의 슬롯 콘텐츠에 사용자를 사용할 수 있도록 하려면 요소에 대한 특성으로 사용자를 바인딩할 수 있습니다. 요소에는 추가 슬롯을 정의하는 데 사용할 수 있는 특별한 특성인 이름이 있습니다. 블록을 사용하여 상태를 찾은 다음 올바른 범위의 슬롯을 반환하고(this.$scopedSlots[SLOTNAME`](…))을 통해 관련 데이터를 슬롯 범위로 전달합니다. 템플릿을 사용하지 않는 경우 스크립트 태그에서 JavaScript를 꺼내 .js 파일로 만 플링하여 .vue 파일 확장자 사용을 건너 뛸 수 있습니다. 이렇게하면 Vue 파일을 컴파일 할 때 성능이 약간 향상됩니다.

경우에 따라 슬롯 콘텐츠가 자식 구성 요소에서만 사용할 수 있는 데이터에 액세스할 수 있도록 하는 것이 유용합니다. 예를 들어 다음 템플릿이 있는 구성 요소를 가정해 보겠습니다: 2.6.0+에서 업데이트됩니다. 슬롯 특성을 사용하여 더 이상 사용되지 이상할당된 구문은 여기를 참조하십시오. 개폐 프레임 태그 사이에 있는 콘텐츠는 슬롯이 있는 프레임 구성 요소에 삽입되어 슬롯 태그를 대체합니다. 이것은 그것을 하는 가장 기본적인 방법입니다.