Vue 에서 슬롯 슬롯 슬롯 의 사용 방법 과 응용 장면 에 대한 상세 한 분석

무엇이 슬롯 입 니까?
Vue 에서 Child 구성 요소 의 라벨 중간 에 무엇 을 싸 면 안 되 는 지 알 고 있 습 니 다.

그러나 많은 경우 에 우 리 는 구성 요 소 를 사용 할 때 항상 구성 요소 간 밖에서 탭 을 사용자 정의 하려 고 합 니 다.vue 는 역할 영역 슬롯 이 라 고 하 는 슬롯 체 제 를 추 가 했 습 니 다.요구 하 는 버 전 은 2.1.0+입 니 다.
슬롯 은 사실 자리 표시 자 에 해당 합 니 다.구성 요소 에 있 는 HTML 템 플 릿 이 위 치 를 차지 하고 있 습 니 다.뭔 가 를 들 려 주 십시오.슬롯 은 익명 슬롯,구명 슬롯,역할 영역 슬롯 으로 나 뉜 다.
2.6.0 에서 우 리 는 구명 슬롯 과 역할 영역 슬롯 에 새로운 통 일 된 문법(즉 v-slot 명령)을 도입 했다.그것 은 slot 와 slot-scope 를 대체 했다.
익명 슬롯
익명 의 슬롯,우 리 는 그것 을 하나의 슬롯 이나 기본 슬롯 이 라 고 부 를 수 있 습 니 다.구명 슬롯 과 상대 적 으로 name 속성 을 설정 할 필요 가 없습니다.숨겨 진 name 속성 은 default 입 니 다.
father.vue

child.vue

익명 슬롯,name 의 속성 은 default 에 대응 하고 쓰 지 않 아 도 된다 는 것 이 기본 적 인 뜻 입 니 다.
사용 할 때 주의해 야 할 문제 가 하나 더 있 습 니 다.만약 2 개 이상 의 익명 슬롯 이 있다 면 child 태그 의 내용 이 모두 slot 로 바 뀔 것 입 니 다.
서명 슬롯(vue 2.6.0+폐 기 된 slot='name')
말 그대로 slot 는 name 을 가 진 정의 입 니 다.  또는 간단 한 줄 임 말 정의 사용\#header 사용:template 태그 로 감 싸 야 합 니 다.
father.vue

child.vue

여기 서 여러 개의 구명 슬롯 을 사용 하 는 여러 개의 구명 슬롯 을 말씀 드 리 겠 습 니 다.슬롯 의 위 치 는 슬롯 의 위 치 를 사용 하여 정 해진 것 이 아니 라 정 의 될 때의 위 치 를 바 꾸 는 것 입 니 다.
father.vue

child.vue

역할 영역 슬롯
바로 데 이 터 를 전달 하 는 슬롯 입 니 다.
한 슬롯 에서 데 이 터 를 사용 하려 면 문제 역할 영역 에 대한 문 제 를 주의해 야 합 니 다.Vue 공식 문서 에서 부모 템 플 릿 의 모든 내용 이 부모 역할 영역 에서 컴 파일 되 었 다 고 말 했 습 니 다.하위 템 플 릿 의 모든 내용 은 하위 역할 영역 에서 컴 파일 됩 니 다.
하위 구성 요소 의 데 이 터 를 부모 급 슬롯 내용 에서 사용 할 수 있 도록 요소 의 특성 으로 연결 할 수 있 습 니 다:v-bin:text="text"
주의:
익명 의 역할 영역 슬롯 과 구 명의 역할 영역 슬롯 은 v-slot:defult='받 아들 이 는 이름'(defult(익명 은 쓰 지 않 아 도 되 고,구 명 은 반대로 대응 하 는 name)과 구별 된다.
v-solt 는 받 은 필드 를 재 구성 할 수 있 습 니 다.전 달 된 필드 와 같 아야 합 니 다.예 를 들 어 원 은 v-slot="{one}"에 대응 합 니 다.

효과 도

총결산
Vue 의 슬롯 슬롯 사용 방법 과 응용 장면 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 슬롯 슬롯 사용 방법 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!