スロット(Slot)

スロット|Vue。js
(親から子へ)転送された領域スナップショット

// ＜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 Slot

// ＜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と書くこともできます.