컴포넌트 - Slot

컴포넌트의 Slot 키워드에 대해 살펴보도록 합시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. Slot

이전의 컴포넌트 - 기초 글에서 언급했던 slot에 대해 좀 더 알아보도록 합시다.

1.1 Fallback Contents

먼저 이전에 배웠던 예시부터 보도록 하겠습니다.

App.vue(부모 컴포넌트)

<MyBtn>Banana</MyBtn>

export default {
  components: {
    MyBtn
  }
}

MyBtn.vue(자식 컴포넌트)

<div class="btn">
    <slot></slot>
</div>

이처럼 slot의 태그로 부모 컴포넌트에서 받을 데이터의 자리를 표시하면 Banana라는 텍스트를 화면에 출력할 수 있었습니다. 하지만 여기서 slot 태그 내에 내용을 입력할 수 있습니다.

App.vue(부모 컴포넌트)

<MyBtn></MyBtn>

MyBtn.vue(자식 컴포넌트)

<div class="btn">
    <slot>Apple</slot>
</div>

이렇게 slot 태그 내에 텍스트를 입력하면, 그 내용인 Apple이 출력됩니다. 하지만 부모 컴포넌트에 내용이 없을 경우에만 출력되며 <MyBtn>Banana</MyBtn> 이처럼 부모 컴포넌트에 텍스트가 있다면 해당 내용이 우선 출력됩니다.

이렇게 slot 태그 내에 입력한 컨텐츠를 Fallback Contents라 부릅니다. 이는 대체 컨텐츠라는 의미입니다.

1.2 Named Slots

App.vue(부모 컴포넌트)

<MyBtn>
    <span>Banana</span> // text
    <span>(B)</span>    // icon
</MyBtn>

MyBtn.vue(자식 컴포넌트)

<div class="btn">
    <slot>Apple</slot>
</div>

위와 같이 slot 태그 안에 컨텐츠를 두 개 이상 입력할 수도 있습니다. 그러나 이처럼 입력하게 되면 입력한 순서대로인 텍스트인 Banana 다음 아이콘 (B)가 출력됩니다.

이러한 순서를 정확히 지켜서 동작하게 하고 싶다면, Named Slots(이름을 갖는 슬롯)을 적용할 수 있습니다.

App.vue(부모 컴포넌트)

<MyBtn>
  <template v-slot:icon>
    <span>(B)</span>
  </template>
  <template #text> // #: v-slot의 약어 
    <span>Banana</span>
  </template>
</MyBtn>

MyBtn.vue(자식 컴포넌트)

<div class="btn">
  <slot name="icon"></slot>
  <slot name="text"></slot>
</div>

먼저 자식 컴포넌트에는 slot 태그에 간단하게 name이라는 속성을 추가해서 각각의 값을 명시해줍니다.

그리고 부모 컴포넌트에는 컨텐츠를 template라는 태그로 감싸줍니다. 그리고 그 태그에 v-slot이라는 속성을 추가해서 자식 컴포넌트에서 정의한 slot 이름을 명시해줍니다. v-slot은 약어로 #을 사용하며, 약어를 주로 사용합니다.

중요한 것은 위와 같이 순서를 보장했기 때문에 부모 컴포넌트에서 순서가 뒤바뀐다 하더라도 보장한 순서대로 출력이 됩니다.