[Vue] 컴포넌트 재사용을 위한 Slots 활용하기

 

 

 

 

0. 슬롯(Slots) 이란?

 

비즈니스적인 요구사항에 의해 컴포넌트의 특정 부분(버튼, 텍스트 ...)만 바꾸고 싶을때

 

새로운 컴포넌트를 많들지 않고 기존 컴포넌트의 일부만 바꿀 수 있는 방법이 있다.

 

즉, 컴포넌트의 재사용성을 높이기 위해서 사용하는 기능을 슬롯(Slots)이라 한다.

 

또한 Vue.js 2.6.0 버전 이후부터는 기존의 named slots와 scoped slots를 통합한 v-slot 문법을 사용한다.

 

<child >

<a v-bind:href="url" class="child">
  <slot></slot>
</a>

 

<parent>

<child url="/order">
  This is parent
</child >

 

→ 결과: <slot></slot> 에 This is parent가 출력된다.

 

 

 

1. 컴파일 범위 (Compilation Scope)

부모 템플릿 안에 있는 것은 부모 컴포넌트의 범위, 자식 템플릿 안에 있는 것은 자식 컴포넌트의 범위에 컴파일된다.

 

// 부모컴포넌트에 있는것은 잘 출력되고 없는것은 출력되지 않는다

<child url="/order">
  {{ order.status }}
</child>

<child url="/order">
  {{ url }}
</child>

 

 

 

2. default 값 지정

<submit-button> 컴포넌트에는 slot을 지정해주는데 default로 Submit이라고 지정해 주었다.

<button type="submit">
  <slot>Submit</slot>
</button>

 

위에서 default를 지정하였으므로 <submit-button>의 이름을 따로 명시 하지 않으면 Submit이라고 나온다.

 

다른 이름을 주고싶은 경우에는 아래와 같이 만들면 된다.

<submit-button>
  Save
</submit-button>

 

 

 

3. Named Slots

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

 

이름있는 slot을 가져다 쓸때에는  template  태그에 v-slot:slot이름 을 넣으면 된다.

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

 

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

 

 

 

4. Scoped Slots

자식 컴포넌트에서만 접근 할 수 있는 데이터에서 슬롯에 필요한 내용을 가져올때 필요하다.

 

아래의 경우 스코프 밖의 범위이므로 값을 가져올 수 없다.

<span>
  <slot>{{ order.userName }}</slot>
</span>

 

<current-user>
  {{ order.userName }}
</current-user>

 

부모에서 order에 접근 할 수 없다. <current-user>만 order에 접근 할 수 있다.

 

<span>
  <slot v-bind:user="user">
    {{ order.userName }}
  </slot>
</span>

 

다음과 같이 부모 컴포넌트에서 가져올 slotProps를 지정해주고 자식 컴포넌트에서는 v-bind로 연결해주면 된다.

 

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.order.userName }}
  </template>
</current-user>

 

 

 

 

5. Named Slots Shorthand

v-slot: 대신 # 기호를 사용해서 간단하게 v-slot을 사용 할 수 있다. 

<template #header> 
   <h1>Here might be a page title</h1> 
</template> 

<current-user #default="{ user }"> 
   {{ user.firstName }} 
</current-user>

 

 

 

# 참고 사이트

https://v3.ko.vuejs.org/guide/component-slots.html

https://sunny921.github.io/posts/vuejs-slots/