슬롯(Slots)

슬롯(Slots) | Vue.js

(부모에서 자식으로) 전달받는 영역 Slots

// ＜submit-button＞ component
<button type="submit">
  <slot>Submit</slot> // 기본값 "Submit"
</button>

// use 1
<submit-button></submit-button>
// render 1
<button type="submit">Submit</button>

// use 2
<submit-button>Save</submit-button>
// render 2
<button type="submit">Save</button>

이름이 있는 슬롯 Named Slots

// ＜base-layout＞ component
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
</div>

// use
<base-layout>
  <template v-slot:header>
    <h1>제목</h1> <!-- Light DOM : 지정된 slot을 찾아갈 자식 요소들 -->
  </template>
  <p>내용</p>
</base-layout>

// render
<div class="container">
  <header>
    <h1>제목</h1>
  </header>
  <main>
    <p>내용</p>
  </main>
</div>

*v-slot:header는 #header로 쓸 수도 있다.