跳至主要内容

[Vue] 元件-Slot

TL;DR​

參考資料​

相關連結​

Slot簡介​

在元件中可以在template中插入slot插槽，提供給外層的元件將片段插入插槽中。

使用方法​

<div id="app">
  <div class="p-5">
    <h3>Slot 插巢與插巢預設值</h3>
    <card>
      <i>插入slot插槽</i>
    </card>
    <br>
    <!-- 沒有填入slot內容的插槽，會帶入vue.js中<slot>內的預設值 -->
    <card></card>
  </div>
</div>

如果子元件template內只有一個slot，則可以直接在掛載元件內插入內容，會自動帶入插槽中。

也可以在子元件template內的slot中撰寫預設值，掛載元件沒有插入slot內容時，則會顯示子元件template的slot內的預設值。

具名插槽​

使用具名插槽時需要搭配 template 標籤使用

當 子元件 template內有多個slot時，就需要透過name屬性給予每個slot名字。(<slot name="slotName"></slot>)

並且在使用時填入<template v-slot:slotName> 來指定要帶入哪個插槽。 (需要使用template標籤才可以正確使用v-slot指令)

沒有指定name的插槽則需要使用v-slot:default去將內容插入該插槽。

<div id="app">
  <div class="p-5">
    <h3>具名插巢</h3>
    <card2>
      <template v-slot:header>我喜歡這張卡片</template>
      <!--  預設請加入 default  -->
      <template #default>這是卡片 2 號</template>
      <template v-slot:footer>這是卡片腳</template>
    </card2>


    <h3 class="mt-3">具名插巢縮寫</h3>
    <card2>
      <template #header>我喜歡這張卡片</template>
      <template #default>這是卡片 2 號</template>
      <template #footer>這是卡片腳</template>
    </card2>
  </div>
</div>
具名插槽縮寫

在指定帶入插槽的名稱時，可以使用#縮寫

e.g: v-slot:header 與 #header 是等價的。

指定多個default​

<div id="app">
  <div class="p-5">
    <h3>多元件指定相同插槽</h3>
    <card2>
      <template v-slot:header>我喜歡這張卡片</template>
      <!-- 同時指定兩個相同插槽時，以第一個指定的為主 -->
      <template #default>這是卡片 2 號</template>
      <template #default>這是卡片 二 號</template>
    </card2>
  </div>
</div>

具有多個相同名稱插槽​

當具有多個相同名稱的插槽，或具有多個未命名插槽。則同名插槽所帶入的內容都會完全相同。

<div id="app">
  <div class="p-5">
    <h3>具有多個同名插槽</h3>
    <card2>
      <template v-slot:header>我喜歡這張卡片</template>
      <template #default>這是卡片 2 號</template>
      <!-- footer沒有指定，會帶入預設值 -->
    </card2>
  </div>
</div>