11. Slot

[zyuan8591]

<button class="fancy-btn">
  <slot></slot>
</button>

named slot

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

v-slot:header 可簡寫為 #header

<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

dynamic slot

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

default slot pass props

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

named slot pass props

<FancyList :api-url="url" :per-page="10">
  <template #item="{ body, username, likes }">
    <div class="item">
      <p>{{ body }}</p>
      <p>by {{ username }} | {{ likes }} likes</p>
    </div>
  </template>
</FancyList>