vue 插槽

v-slot

具名插槽

子組件:

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

父組件：

<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>

v-slot只能在組件或 template標籤上使用

具名插槽的縮寫
縮寫爲#。例如v-slot:header能夠被重寫爲#header
默認插槽
沒有name，默認爲default

<current-user v-slot:default="slotProps"> // 或縮寫: v-slot="slotProps"
    {{ slotProps.user.firstName }} 
</current-user>

默認插槽的縮寫語法 不能和具名插槽混用

動態插槽名

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

做用域插槽

子組件：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父組件：

<current-user>
  <template v-slot:default="slotProps"> 
    {{ slotProps.user.firstName }}
  </template>
</current-user>
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

$slots

用來訪問被插槽分發的內容。每一個具名插槽 有其相應的屬性 (例如：v-slot:foo中的內容將會在 vm.$slots.foo 中被找到)