[Vue.js] 컴포넌트 - Slot

컴포넌트 - Slot

1. Slot

1.1 Fallback Contents

//App.vue(부모 컴포넌트)
<MyBtn>Cherry</MyBtn>
export default {
  components: {
    MyBtn
  }
}

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot></slot>
</div>

slot의 태그로 부모 컴포넌트에서 받을 데이터의 자리를 표시하면 Cherry라는 텍스트를 화면에 출력할 수 있었습니다.

하지만 여기서 slot 태그 내에 내용을 입력할 수 있습니다.

//App.vue(부모 컴포넌트)
<MyBtn></MyBtn>

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot>Apple</slot>
</div>

slot 태그 내에 텍스트를 입력하면, 그 내용이 출력됩니다.

하지만 부모 컴포넌트에 내용이 없을 경우에만 출력되며, 부모 컴포넌트에 텍스트가 있다면 해당 내용이 출력됩니다.

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

1.2 Named Slots

//App.vue(부모 컴포넌트)
<MyBtn>
    <span>Cherry</span> // text
    <span>(B)</span>    // icon
</MyBtn>

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot>Apple</slot>
</div>

slot 태그 안에 컨텐츠를 두 개 이상 입력할 수도 있습니다.

하지만 이처럼 입력하게 되면 입력한 순서대로인 텍스트인 Cherry 다음 아이콘 (B)가 출력됩니다.

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

//App.vue(부모 컴포넌트)
<MyBtn>
  <template v-slot:icon>
    <span>(B)</span>
  </template>
  <template #text> // #: v-slot의 약어 
    <span>Cherry</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은 약어로 #을 사용하며, 약어를 주로 사용합니다.

순서를 보장하면 부모 컴포넌트에서 순서가 뒤바뀐다 하더라도 보장한 순서대로 출력이 됩니다.