slots
부모component에서 자식의 템플릿 content를 렌더링해주는 것

slots

기본

자식Component

<div>
  <slot name="header"></slot>
</div>
<div>
  <slot></slot>
</div>
<div>
  <slot name="content"></slot>
</div>
<div>
  <slot name="footer2">footer2입니다</slot> 
</div>

footer2는 상위 컴포넌트에서 정의하지않는다면 footer2입니다라는 기본 메세지가 뜬다

부모Component

<template v-slot:header>제목</template>
<template v-slot>안녕</template>
<!--<template v-slot:default>안녕</template>-->
<template #content>Content</template>

동적 슬롯 이름

자식 Component

<div>
  <slot name="footer">footer입니다</slot>
</div>

부모Component

  const slotValue = ref('footer');
  ...
 <template #[slotValue]>slotValue입니다</template>

rendor Scope

자식컴포넌트의 데이터를 slot에 이용하려는 경우

자식 Component

const greetingMessage = ref('Hello World!')

<div>
  <slot name="slotProps" :text="greetingMessage" :count="1"></slot>
</div>

부모 Component

<template #slotProps="obj">
  {{obj.text}}, {{obj.count}}
</template>

slot이 지정되지않으면 없애기

$slots

자식 Component

<div v-if="$slots.footer3" >
  <slot name="footer3">부모에서 정의내리지않으면 이 div객체는 생성되지않는다</slot>
</div>

응용

FancyList.vue(자식 Component)

<script setup>
import { ref } from 'vue'

const items = ref([])

// 모의 원격 데이터 가져오기
setTimeout(() => {
  items.value = [
    { body: '범위가 지정된 슬롯 가이드', username: '신형만', likes: 20 },
	  { body: 'Vue 튜토리얼', username: '나미리', likes: 10 }
  ]
}, 1000)
</script>

<template>
  <ul>
    <li v-if="!items.length">
      로딩...
    </li>
    <li v-for="item in items">
      <slot name="item" v-bind="item" v-bind:count="1"/>
    </li>
  </ul>
</template>

App.vue(부모 Component)

<template>
  <FancyList :api-url="url" :per-page="10">
    <template #item="{ body, username, likes, count }">
      <div class="item">
        <p>{{ body }}</p>
        <p class="meta">by {{ username }} | {{ likes }} likes</p>
        <p>
          {{ count }}
        </p>
      </div>
    </template>
  </FancyList>
</template>