Vue.js slot

slot

자식이 부모데이터를 사용할때 props로 전송하게 되는데
이 대용으로 사용할 수 있는 간단한 문법

<slot></slot>

위 html태그를 이용해 데이터가 필요한곳을 정해놓고
부모는 <자식컴포넌트>데이터</자식컴포넌트>를 작성한다.
부모가 가진 데이터가 자식의 slot자리에 사용되게 된다.
등록을 하지 않아도 됨

slot은 prop과 달리 src, style속성에서는 사용이 가능하지만
html태그이므로 html태그로만 사용이 가능하다.

Named Slots

전해줘야할 데이터가 많아 여러개를 사용해야할 때 이용한다.

자식 컴포넌트에서
<slot name='a'></slot>

부모컴포넌트에서
<자식>
  <template v-slot:a>데이터</template>
</자식>

작명법 없이 자유롭게 작명 가능

Slot Props

부모가 slot으로 데이터를 전달 시 자식 데이터를 사용해야 할 때

<slot :데이터='데이터'></slot>

위 데이터를 부모가 사용할 때는

<자식>
  <template v-slot:default='aaa'>{{aaa.데이터}}</template>
</자식>

v-slot:옆에 default를 적어서 자식이 보낸 데이터 수신이 가능하다.