Vue 슬롯, 텔레포트, Provide/Inject - Vue 심화 외전 2편

Vue Slot, Teleport, and Provide/Inject - Vue Advanced Part 2

<template>
  <div class="card">
    <header class="card-header">기본 카드</header>
    <main class="card-content">
      <!-- 부모가 주는 콘텐츠가 이 자리에 들어옵니다. -->
      <slot></slot>
    </main>
  </div>
</template>
<style scoped>
.card { border: 1px solid #ccc; border-radius: 8px; padding: 16px; }
</style>

<script setup lang="ts">
import CardBox from './CardBox.vue'
</script>
<!-- 부모 컴포넌트 -->
<template>
  <CardBox>
    <!-- 이 부분이 CardBox의 <slot> 자리로 전달됩니다. -->
    <p>이것은 카드 내용입니다.</p>
    <button>클릭하세요</button>
  </CardBox>
 
  <CardBox>
    <img src="/logo.png" alt="Vue Logo" />
  </CardBox>
</template>

<template>
  <div class="card">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- name이 없는 슬롯은 'default'라는 이름을 가집니다. -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
import MultiSlotCard from './MultiSlotCard.vue'
</script>
<!-- 부모 컴포넌트 -->
<template>
  <MultiSlotCard>
    <template #header>
      <h2>카드 제목</h2>
    </template>
 
    <!-- #default는 생략 가능합니다. -->
    <p>카드 본문 내용입니다.</p>
 
    <template #footer>
      <button>확인</button>
    </template>
  </MultiSlotCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showModal = ref(false)
</script>
 
<template>
  <button @click="showModal = true">모달 열기</button>
 
  <!-- Teleport를 사용하여 모달 콘텐츠를 body 태그로 보냅니다. -->
  <Teleport to="body">
    <div v-if="showModal" class="modal-background">
      <div class="modal-content">
        <p>안녕하세요! 저는 모달입니다.</p>
        <button @click="showModal = false">닫기</button>
      </div>
    </div>
  </Teleport>
</template>
 
<style scoped>
.modal-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); }
.modal-content { background: white; padding: 20px; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
</style>

<script setup lang="ts">
import { provide, ref } from 'vue'
import DeepChild from './components/DeepChild.vue'
 
// 'theme'이라는 키로 'dark'라는 값을 제공합니다.
const theme = ref('dark')
provide('theme', theme)
 
function toggleTheme() {
  theme.value = theme.value === 'dark' ? 'light' : 'dark'
}
</script>
 
<template>
  <button @click="toggleTheme">테마 변경</button>
  <DeepChild />
</template>

<script setup lang="ts">
import { inject } from 'vue'
 
// 'theme' 키로 제공된 데이터를 주입받습니다.
// inject<string>('theme') 처럼 타입을 명시할 수 있습니다.
const theme = inject('theme')
</script>
 
<template>
  <div :class="theme">
    현재 테마는: {{ theme }}
  </div>
</template>
 
<style scoped>
.dark { background: #333; color: white; }
.light { background: #eee; color: black; }
</style>