[Vue.js] 18. 컴포넌트 - slot

컴포넌트를 self-closing 형태로 사용하지 않고 열고 닫히는 태그 형태로 사용하게 되면

태그 사이에 들어간 내용을 받아주는 공간이 바로 slot 이다.

만약 태그사이에 아무런 내용을 기재하지 않을 경우 내용이 비게 되는데

slot 사이에 Fallback Contents(대체 컨텐츠)를 넣어두어 디폴트 값을 설정할 수 있다.

컴포넌트 인스턴스 태그 사이에는 문자열 뿐만이 아니라 여러 태그들도 함께 사용이 가능하다.

해당 태그들은 선언된 순서대로 출력된다.

 

v-slot, Named slot

만약 태그들이 선언된 순서 상관 없이 원하는 순서대로 출력하고 싶다면 Named Slot을 사용한다.

template 태그로 감싼 뒤 v-slot 디렉티브( 약어 # )를 사용하여 이름을 지정해준다.

slot에는 name= 속성을 사용하여 해당 이름이 들어갈 슬롯을 지정해주면 된다.