[Vue3] named slot 의 동적 변경

:raising_hand: Vue 개발 중 공부내용을 기록하는 포스트 입니다.

image

1. 개요

기존에도 존재했던 Vue의 Slot 기능을 간단하게 다시 정리하고 추가적으로 동적 변경 기능을 작성해본다.

2. Slot 기능 및 Named Slot 예시

Slot은 부모 컴포넌트에서 작성한 내용을 자식 컴포넌트로 이첩 시킬 경우 사용한다.

간단하게 예를 들어서 확인해보자.

// Parents Component
import TheSlot from './TheSlot.vue'

<template>
    <TheSlot>
    <template v-slot="header">Header 입니다.</template>
    <template #default>Header 입니다.</template>
    <template #footer>Header 입니다.</template>
    </TheSlot>
</template>
<script setup></script>

// Child Component
<template>
  <div>
    <slot name="header"></slot>
  </div>
  <div>
    <slot></slot>
  </div>
  <div>
    <slot name="footer"></slot>
  </div>
</template>

<script setup></script>

위 코드에서 볼 수 있듯이,부모 컴포넌트에서 header, default, footer 를 v-slot 디렉티브로 지정을 해줄 수 있다.

자식 컴포넌트에서는 해당 내용을 받을 slot 태그의 name 속성을 잡아주면 해당 slot 안에 부모컴포넌트에서 정의한 내용이 노출되는 방식이다.

그리고 v-slot 디렉티브는 # 로 대체 가능하다.

3. 동적 Named Slot 변경

이번 포스팅의 목적은 Named Slot 의 변경이다.

만약 우리가 실무에서 컴포넌트를 작성하던 중 동적으로 바뀌는 위치의 자식 Slot 으로 내용을 던지고 싶다면?

이럴대 동적 Named Slot 을 사용하면 된다.

먼저 코드로 살펴보자.

<!-- Parents Component -->

<template>
    <TheSlot>
    <template #[slotArgs]></template>
    </TheSlot>
</template>
<script setup>

import TheSlot from './TheSlot.vue'

const slotArgs = ref('')
const contents = ref('')

const getData = () => {
    
    //...axios 를 통해 데이터를 가져오는 소스 가정
    slotArgs.value = response.data.slotArgs // 넣을 slot 명
    contents.value = response.data.contents // 내용
}

getData()
</script>


<!-- Child Component -->
<template>
  <div>
    <slot name="header"></slot>
  </div>
  <div>
    <slot></slot>
  </div>
  <div>
    <slot name="footer"></slot>
  </div>
</template>

<script setup></script>

위와 같이 axios 호출을 통해서 어떠한 json 결과를 전달받았고, 그 결과안에는 자식 컴포넌트에 노출되어야 하는 slot 위치 및 내용을 담고 있다고 가정하자.

위와 같이 #[slotArgs] 를 사용하게 되면 동적으로 변경되는 위치에 넣을 수 있다.

You may also enjoy