Vue Slot

Vue 개발을 하게 되면 컴포넌트를 여러개 생성하게 되는 경우가 빈번합니다.

각 컴포넌트 마다 같은 역할을 담당하는 컴포넌트가 존재하게 되며, 해당 컴포넌트에 변경 및 추가 작업이 필요할 경우, 전부 다 찾아가면서 작업을 하기엔 시간 및 효율성이 많이 떨어지게 돼요...

 

그래서 재사용성을 높일 수 있는 Slot에 대해 알아봅시다!

 

1. Slot

slot이란? 부모 컴포넌트가 자식 컴포넌트에 콘텐츠를 전달할 수 있게 해주는 기능이에요.

쉽게 말해, 자식 컴포넌트 안에 콘텐츠를 꽂아 넣을 수 있는 자리를 만들어 두는 겁니다.

이를 활용하면 같은 UI 골격에 부모가 다른 콘텐츠를 꽂아서 여러 상황에 재활용할 수 있어요!

 

slot은 컴포넌트 내부에 부모가 바꿔야 할 영역이 있거나 콘테츠가 정적이 아닌 여러 형태로 바뀌는 경우 사용하면 좋습니다.

 

---

2. slot 사용 방법

그럼 바로 직접 사용해봅시다.

 

자식 컴포넌트에 다음과 같이 입력해 줍니다. <slot></slot>을 코드안에 입력하면 slot을 사용할 수 있어요.

 

Child.vue

<template>
  <div class="card">
    <div>자식 컴포넌트</div>
    <!-- 부모가 전달할 콘텐츠가 들어올 자리 -->
    <slot></slot>
  </div>
</template>

 

Parent.vue

<template>
  <Child>
    <p>이 문장은 부모에서 보낸 콘텐츠입니다.</p>
  </Child>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child }
}
</script>

 

결과

결과를 통해 slot 태그가 있는 자리에 부모의 <p>가 들어간 것을 확인할 수 있어요.

자식 컴포넌트
이 문장은 부모에서 보낸 콘텐츠입니다.

 

---

2. 이름이 있는 슬롯 (Named Slot)

슬롯이 여러 개일 때는 이름을 붙일 수 있어요.

Vue 2.6 이상에서는 v-slot:header를 쓰고, Vue 3에서는 v-slot를 사용합니다!

 

Child.vue

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>

    <main>
      <slot></slot> <!-- 기본 slot -->
    </main>

    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

 

Parent.vue

<template>
  <Child>
    <template v-slot:header>
      <h1>헤더 영역입니다.</h1>
    </template>

    <p>메인 콘텐츠입니다.</p>

    <template v-slot:footer>
      <small>푸터 영역입니다.</small>
    </template>
  </Child>
</template>

 

결과

이렇게 하면 slot을 여러 개 사용할 수 있어요.

 

---

3. 슬롯 Props (Scoped slot)

반대로 자식이 부모에게 데이터를 전달할 수도 있어요.

이를 Scoped Slot이라고 합니다.

 

Child.vue

<template>
  <div>
    <!-- 자식이 name 데이터를 부모 슬롯으로 전달 -->
    <slot :name="name"></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: 'Kim'
      }
    }
  }
</script>

 

Parent.vue

<template>
  <Child v-slot="slotProps">
    <p>{{ slotProps.name }} 입니다!</p>
  </Child>
</template>

 

결과

부모가 자식이 전달한 데이터를 슬롯을 통해 받을 수 있어요. (slotProps.name = "Kim")

Kim 입니다!

 

---

4. 정리하며..

지금까지 Vue의 slot에 대해 배워보았습니다.

slot를 잘 활용하면 컴포넌트 재사용성과 유연한 UI를 구성할 수 있습니다!

 

출처

Vue 공식 홈페이지의 슬롯(Slots) -- Vue.js

Minho Yoo 님의 Vue.js 재사용성을 높이자! Slot편

jhhan000 님의 Vue.js - slot문법