Vue.js slot

1. slot을 쓰면 props보다 부모->자식 데이터 전송을 더 쉽고 직관적으로 할 수 있다.

<ChildComponent>
	myData~~!!
</ChildComponent>

2. slot은 HTML에 데이터 바인딩할 경우에만 사용가능하고, 나머지는 props를 써야 한다.

 

3. named slot

<!-- 자식 -->
<slot name="a"></slot>

<!-- 부모 -->
<ChildComponent>
	<template v-slot:a>AAA</template>
	<template v-slot:b>BBB</template>
</ChildComponent>

5. slot은 가독성이 떨어질 수 있음. 간단한 데이터를 전송할 땐 유용함

6. slot으로 자식의 데이터를 가져오고 싶은 경우

<template v-slot:default="data"><span>{{data.msg}}</span></template>