vue - slot

vue는 slot을 사용하여 할 수 있는 일이 많이 있는듯 싶다.

자식컴포넌트에게 간단하게 무언가를 전달할수가있는데

그때 사용하고 싶은 구간에서 slot태그를 사용해서 넣어본다.

 

<script setup>
import SubmitButton from './SubmitButton.vue'
</script>

<template>
  <!-- 대체 텍스트 사용 -->
  <SubmitButton />
  
  <!-- 사용자 정의 텍스트 제공 -->
  <SubmitButton>부모컴포넌트가이김</SubmitButton>
</template>

 

이렇게 해줬을때, 

자식 컴포넌트안에 

<template>
  <button type="submit">
	  <slot>
    	제출 <!-- 대체 컨텐츠 -->
  	</slot>
	</button>
</template>

 

이렇게 사용했어도 버튼모양은 제출이 뜨는것이 아니고

부모컴포넌트가이김 이 나온다.

즉, 부모컴포넌트에서 무언가를 넘겨줬으면 대체컨텐츠보다 위에서 넘겨준것이 우세하다는 이야기다.

 

좀더 심화하여, 

 

이름이 있는 슬롯을 공부해보자.

<div class="container">
  <header>
    <!-- 우리는 여기에 헤더 컨텐츠를 원합니다. -->
  </header>
  <main>
    <!-- 우리는 여기에 메인 컨텐츠를 원합니다. -->
  </main>
  <footer>
    <!-- 우리는 여기에 푸터 컨텐츠를 원합니다. -->
  </footer>
</div>

 

위와같은 모양의 구조를 만든다고 가정해보자,

name이라는 특수속성을 사용한다고 할때 마치 ID처럼 SLOT에게 이름을 부여해줄 수 잇다.

 

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

 

MAIN부분에 이름 속성없는 아이는 임시적으로 default라는 이름을 가지게도니다.

 

<BaseLayout>
  <template v-slot:header>
    <!-- 헤더 슬롯의 컨텐츠 -->
  </template>
</BaseLayout>

 

이름있는 slot전달할때는 template을 함께 사용해서 전달을 해야한다.

 

이름있는 슬롯컨텐츠 전달할때 이렇게 사용해도된다

<BaseLayout>
  <template #header>
    <h1>다음은 페이지 제목일 수 있습니다.</h1>
  </template>

  <template #default>
    <p>주요 내용에 대한 단락입니다.</p>
    <p>그리고 또 하나.</p>
  </template>

  <template #footer>
    <p>다음은 연락처 정보입니다.</p>
  </template>
</BaseLayout>

 

 

template 엘리먼트 내부의  해당슬롯으로 전달된다.

 

자식부분에서 그렇담 어떻게 보여지는가?

<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style>
  footer {
    border-top: 1px solid #ccc;
    color: #666;
    font-size: 0.8em;
  }
</style>

 

이름으로 엮어서, 여러가지 정보를 다 다르게 밑으로 내려줄수있다는 말이다.