조건부 slot / 동적 slot / 대체 컨텐츠를 사용한 slot

실제예제

조건부 slot

v-if="$slots.슬롯명"을 사용해서 slot을 조건부로 표시할수있다 (예제의 1번 참고)


동적 slot

변수에 슬롯명을 할당한후 동적으로 slot을 표시할수있다( 예제의 3번 참고 )

#[변수명]
v-slot:[변수명]

등으로 사용가능하다


대체 컨텐츠를 사용한 slot

해당 slot이 사용되지 않을 경우 대체 컨텐츠(fallback:대비책)이 표시된다 ( 예제의 2번 참고 )

<slot>대체표시컨텐츠</slot>




부모템플릿


<script setup>
import Card from './Card.vue'
const dynamicSlotName="footer"
</script>

<template>
  <Card>
    <template #header> <!-- 1.조건부 slot예제 -->
      <h3>헤더입니다</h3>
    </template>

    <template #default> <!-- 2.대체 컨텐츠를 사용한 slot예제 -->
      <h3>컨텐츠입니다</h3>
    </template>

    <template #[dynamicSlotName]> <!-- 3.동적 slot예제 -->
      <h3>푸터입니다</h3>
    </template>
  </Card>
</template>


자식컴포넌트


<template>
  <div class="card">
    <div v-if="$slots.header" class="card-header">
      header 슬롯이 존재할 경우 표시됩니다 
      <slot name="header" />
    </div>

    <div class="card-content">
      <slot >
        해당 슬롯에 아무것도 입력되지 않았습니다 (fallback)
      </slot>
    </div>
    
    <div class="card-footer">
      동적으로 이름을 지정한 footer슬롯이 표시됩니다 
      <slot name="footer" />
    </div>
  </div>
</template>

<style>
  .card {
    border: 1px solid black;
    padding: 0;
  }
  .card-header {
    background-color: skyblue;
    padding: 4px;
  }
  .card-content {
    padding: 4px;
  }
  .card-footer {
    background-color: beige;
    padding: 4px;
  }
</style>


참고

슬롯참고

실제예제

May 18, 2024 Views 76