vue3 slot이란, vuejs slot 사용법, vue slot 여러개, v-slot

vue.js slot이란, v-slot이란?

slot이란 무엇인가 들어가는 자리라는 의미이며, 게임에서 아이템 슬롯 할때 말하는 슬롯과 같이 쓰입니다.
vue js에서 slot은 컴포넌트를 넣을 수 있는 자리를 만들어, 컴포넌트의 재사용성을 높이기 위해 사용되는 기술입니다.

vue3 slot 사용법, v-slot

먼저, Component에서 아래와 같이 <slot>을 사용하여,
외부에서 <slot>을 주입할 수 있는 자리를 만들어줍니다.

Component.vue

<template>
  <ul style="list-style-type: none">
    <li v-for="item in items">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3],
    }
  },
}
</script>

Component.vue를 사용하는 아래 코드에서,
Component 안쪽에 아래와 같이 입력을 하면,

1	<template v-slot="slotProps"></template>

Component.vue에서 정의한 props를 접근할 수 있습니다.

App.vue

<template>
  <Component>
    <template v-slot="slotProps" > ✔️ {{ slotProps.item }} </template>
  </Component>
</template>

<script>
import Component from './Component.vue'

export default {
  components: {
    Component,
  },
}
</script>

위 코드에 대한 결과는 아래와 같습니다.

vuejs slot 여러개

상위 component에서 정할 slot을 여러개 지정하고 싶을 경우,
아래와 같이 slot 쪽에는 name 속성에 값을 입력하여 줍니다.

1
2
3

//MyComponent.vue
<slot name="slot1"></slot>
<slot name="slot2"></slot>

상위 Component에서는 아래와 같이 template쪽에 #[slot이름]을 써주면,
각 slot name에 맞는 곳에 내용이 채워지게 됩니다.

<MyComponent>
  <template #slot1>
    <button>click1</button>
  </template>
  <template #slot2>
    <button>click2</button>
  </template>
</MyComponent>

즉 MyComponent를 렌더링 시, 아래와 같이 대체됩니다.

1 2	<slot name="slot1"></slot> --> <button>click1</button> <slot name="slot2"></slot> --> <button>click2</button>

각 slot별로 slot props를 접근 하려면, 아래와 같이 #[slot이름]=[props명] 을 써주면됩니다.

App.vue

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>