props대신 쓰는 slot

slot은 부모에서 자식으로 데이터를 전송하는 props를 대신하는 문법이다.

부모에서 자식으로 데이터를 전송하려면,

먼저, 자식에 구멍을 뚫고,(slot태그를 적어주기)

부모에 컴포넌트를 적을 때, <컴포넌트>이안에 내용은 slot에 들어감</컴포넌트> 이런 식으로 컴포넌트 태그안에 내용이 slot태그에 들어가게 할 수 있다.

//부모
<component>
	{{데이터}}
</component>

//자식
<div>
	<slot></slot>	
</div>

이런 식으로 사용하면 데이터가 슬롯자리에 들어가게 된다. slot은 속성엔 사용할 수 없어서 그럴 땐, props를 사용해야 한다.

 

그리고 slot를 여러개 사용하려면

//부모
<component>
	<template v-slot:a> 여기 데이터는 a자리에 감 </template>
    	<template v-slot:b> 여기 데이터는 b자리에 감 </template>
</component>

//자식
<div>
	<slot name="a"></slot>	
    	<slot name="b"></slot>	
</div>

이런 식으로 사용하면 된다.