이름이 있는 슬롯(Named Slots)

사용하는 쪽 (page)

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
  
  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
  
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

컴포넌트 (component)

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

이름이 있는 슬롯에 내용을 전달하려면 <template>에 v-slot 디렉티브를 쓰고 그 속성에 앞에서 지정한 ‘name’을 넣으면 됩니다.

렌더링된 HTML

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>