Vue Slots

Hyunjun Jang·2022년 1월 30일

슬롯이란?

일반적으로 슬롯이라고 하면 구멍, 가느라다란 구멍이라는 뜻을 가지고 있다. 정말 간단하게 표현하자면 슬롯이란 컴포넌트에 콘텐츠나 다른 컴포넌트를 또 다른 방식으로 주입시킬 수 있는 방법이다. 이 방법을 활용하면 컴포넌트를 훨씬 재사용하기 용이하게 만들수 있다.

사용법

기본

<template>
  <!--부모 컴포넌트-->
  <ChildComponent>
    <button>버튼</button>
  </ChildComponent>
</template>

<!-- 자식 : ChildComponent -->
<template>
  <div>
    <!--부모에서 정의한 '버튼'이 위치합니다 -->
    <slot></slot>
  </div>
</template>

이름 있는 슬롯

<template>
  <!--부모 컴포넌트-->
  <ChildComponent>
    <button slot="left">왼쪽 버튼</button>
    <button slot="right">오른쪽 버튼</button>
  </ChildComponent>
</template>

<!-- 자식 : ChildComponent -->
<template>
  <div>
    <!--부모에서 정의한 '왼쪽 버튼'이 위치합니다 -->
    <slot name="left"></slot>

    <!--부모에서 정의한 '오른쪽 버튼'이 위치합니다 -->
    <slot name="right"></slot>
  </div>
</template>

자식 데이터 부모에서 사용하는 slot-scope (함수, 변수 모두 사용)

<!-- 자식-->
<template>
  <div>
    <header>
      <slot name="child" :childData="childData" :close="close">
        <button>버튼</button>
      </slot>
    </header>
    <div>
      <slot name="body">
        <p>기본 바디</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseModal",
  data() {
    return {
      childData: "child",
      active: false
    };
  },
  methods: {
    close() {
      this.active = false;
    }
  }
};
</script>

<!-- 부모 -->
<template>
  <div>
    <BaseModal>
      <!--자식에서 사용하던 name="child"로 감싸진 태그의 함수, 변수 모두 가져옵니다.-->
      <template slot="child" slot-scope="slotProps">
        <button @click="slotProps.close">닫기</button>
        <!-- { childData: 'child' } -->
        {{ slotProps }}
      </template>
      <p slot="body">바디입니다.</p>
    </BaseModal>
  </div>
</template>

v-slot

‘이름이 있는 슬롯’과 ‘범위를 가지는 슬롯’을 위한 새로운 통합 문법(‘v-slot’ 디렉티브)을 도입했다. named-slot + slot-scope 라고 보면 된다.
다른점은 slot을 v-slot을 사용할 때, 무조건 template 태그로 감싸고 그 컴포넌트 안에서 v-slot를 사용해야 한다.
그리고 slot, slot-scope는 이후 업데이트 될 Vue 3에서는 공식적으로 삭제된다고 하니 Vue에서 공식적으로 지원 할 v-slot만 사용하도록 하자.
위 예제에서 v-slot으로 변형하면 아래와 같다.

<template>
  <div>
    <BaseModal>
      <template v-slot:child="slotProps">
        <button @click="slotProps.close">닫기</button>
        <!-- { hello: 'hello' } -->
        {{ slotProps }}
      </template>
      <template v-slot:body>
        <p>바디입니다.</p>
      </template>
    </BaseModal>
  </div>
</template>