vue slot 사용법

출처

vue slot 사용법

 

slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용합니다.
부모에 따라서 자식의 컴포넌트에 영향을 받을 테니, 컴포넌트 재사용성면에서 좋은 장점을 가집니다.
또한 범위 있는 slot을 통해 컴포넌트 내에서도 잘게 쪼개서 재사용이 가능합니다.
예제를 통해서 어떻게 사용되는지 살펴보고 각자의 상황에 맞게 가져가시길 바랍니다.

 

v-slot

• 간단하게 named-slot + slot-scope입니다
• 다른점은 slot을 v-slot을 사용할 때, 무조건 template 태그로 감싸고 그 컴포넌트 안에서 v-slot를 사용해야 합니다.

위 예제에서 v-slot으로 변형하면 아래와 같습니다.

 

기본

 

 

 

이름 있는 슬롯 slot

 

 

 

자식 데이터 부모에서 사용하는 slot-scope (함수, 변수 모두 사용)