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>
image
출력



참고자료:


소스코드 바로확인하기


응용 소스코드 확인하기

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...