Vue.js] 15. Component > Slots

컴포넌트의 props는 모든 유형의 JavaScript값을 받을 수 있다. 그렇다면, 템플릿 content는 어떨까? template fragment를 자식 component에 전달해서 자식 component가 fragment를 렌더링하길 원할 수 있다. 

<FancyButton>
  클릭하기! <!-- 슬롯 컨텐츠 -->
</FancyButton>
<!-- FancyButton -->
<button class="fancy-btn">
  <slot></slot> <!-- 슬롯 아울렛 -->
</button>
<!-- 최종 렌더링된 DOM -->
<button class="fancy-btn">클릭하기!</button>

 

여러 엘리먼트를 전달할 수도 있다. 

<FancyButton>
  <span style="color:red">클릭하기!</span>
  <AwesomeIcon name="plus" />
</FancyButton>

 

대체 컨텐츠

<button type="submit">
  <slot>
    제출 <!-- 대체 컨텐츠 -->
  </slot>
</button>
<!-- 부모 -->
<SubmitButton />
<!-- 최종 렌더링된 DOM -->
<button type="submit">제출</button>

Named Slots

<BaseLayout>
  <template v-slot:header>
    <!-- 헤더 슬롯의 컨텐츠 -->
  </template>
</BaseLayout>
<!-- BaseLayout -->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

 

다음과 같이 단축 문법을 사용할 수 있다. 

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

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

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

Conditional Slots

<template>
  <div class="card">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>
    
    <div v-if="$slots.default" class="card-content">
      <slot />
    </div>
    
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>