Vue Slot 사용법

Slot 이란?

Vue에는 Slot이라는 기능이 있습니다.

부모컴포넌트에서 자식 컴포넌트로 temlplate을 전달할 수 있는 기능입니다.

 

Props를 이용해서 데이터를 전달할 수 있지만, template은 전달할 수 없고,

Props 만을 이용해서 각각의 template를 전달하려면 코드가 복잡하고 알아보기 어렵게 됩니다.

 

Slot를 이용하면 공통적인 template를 직관적으로 사용할 수 있습니다.

 

Slot 사용법

<script>
export default {
  name: "BaseCard"
}
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>

<BaseCard>
Content
</BaseCard>

 

BaseCard 내부에 작성한 Content 가 slot 태그 내부에 들어가게 됩니다.

 

named Slot 사용법

두개의 template를 사용하고 싶을 때가 있습니다.

아래와 같은 방법으로 사용할 수 있습니다.

<script>
export default {
  name: "BaseCard"
}
</script>

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

<BaseCard>
  <template v-slot:header>
    Header
  </template>
  Content
</BaseCard>

 

header 가 들어갈 곳에는 slot name을 지정합니다.

그 이후 template에 v-slot 디렉티브를 추가합니다.

 

slot은 언제 사용하면 좋을까?

데이터를 로드하고 list 들의 데이터를 적절하게 표시하고 싶을 때 사용하면 좋습니다.

<script>
export default {
  name: "BaseDataList",
  props: ['items']
}
</script>

<template>
  <ul v-for="item in items" :key="item.name">
    <li v-for="key in Object.keys(item)" :key="key">
      <slot :name="key" :item="item"></slot>
    </li>
  </ul>
</template>

<style scoped>

</style>

<base-data-list :items="items">
  <template #name="{ item }">
    name: {{ item.name }}
  </template>
  <template #age="{ item }">
    age: {{ item.age }}
  </template>
  <template #jobs="{ item }">
    jobs: {{ item.jobs }}
  </template>
</base-data-list>