Vuejs slot에 다이나믹 name 사용하기

1. 개요

Vue의 slot에 다이나믹하게 name을 지정하는 방법을 알아보자 참고로 slot은 react에서 children과 같은 개념이다.

2. 기본 사용방법

// parent
<template v-slot:top>
  <div>rhapsodist</div>
</template>

// children
<slot name="top"/>

slot은 기본적으로 위와 같이 사용할 수 있다.

부모 컴포넌트에서 template태그를 지정하고 v-slot에 이름을 지정해준다. 그리고 자식 컴포넌트에서 slot태그를 작성하고 name에 부모에서 정한 slot name을 넣어 주면된다.

3. 문제점

기본 사용 코드를 보면 부모컴포넌트에서 v-slot에 넣은 name은 변수나 함수가 아니다.

아래의 상황을 보자.

// children
<slot name="top"/>
<div>divider</div>
<slot name="bottom"/>

만약 부모 컴포넌트에서 slot을 보내는데 조건에 따라, 때로는 top에, 때로는 bottom 슬롯으로 보내고 싶을 수 있다.

하지만 부모 컴포넌트에서 v-slot에 지정하는 name은 변수나 함수가 아니기 때문에 static하다. 결론적으로 하나의 template으로는 하나의 slot에 밖에 보낼 수 없다는 말이다.

4. Dynamic name 설정하기

// parent
<template v-slot:[position]>
  {{ user.firstName }}
</template>
// position value => top or bottom

v-slot에 정적인 name을 지정하지 않고 위에서 position은 변수이다. 위와 같이 [position]로 지정을 해준 후 position 변수에 top 혹은 bottom이라는 value 값을 지정해주면 slot을 다이나믹하게, 필요할때 원하는 위치로 보낼 수 있다.