2023 Vue直播班筆記 - Slot插槽

筆記以個人清楚理解方式記錄

前言

插槽是甚麼？插槽是父元件針對子元件內的某區塊根據不同需求提供不同樣板渲染的功能，也可以說是父元件對於子元件內該區塊的延伸應用，其中包含

• 具名
• 默認預設

以下以簡單的圖例說明：

默認插槽

<div id="app">
  <h3>Slot 插巢與插巢預設值</h3>
  <card></card>
  <br>
  <card></card>
</div>

<script type="module">
  const app = Vue.createApp({});
  app.component('card', {
    template: `
      <div class="card" style="width: 18rem;">
        <div class="card-header">
          元件 Header
        </div>
        <div class="card-body">
          <p>這段是預設的文字</p>
        </div>
        <div class="card-footer">
          元件 Footer
        </div>
      </div>`
    })
  app.mount('#app');
</script>

這時我們如果想把card內某個區塊釋放出來要怎麼做呢？

這邊以<p>這段是預設的文字</p> 來展示，把它釋放後會變成

app.component('card', {
  template: `
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        元件 Header
      </div>
      <div class="card-body">
        <slot></slot>
      </div>
      <div class="card-footer">
        元件 Footer
      </div>
    </div>`
  })

子元件釋放出了空間，我們便可以加以應用它，

因此我們可以在父元件放入自己寫的HTML，

如果外層有定義會先優先引用外層定義的HTML，

沒有則會引用子元件自己本身<slot></slot>內的HTML

<div id="app">
  <h3>Slot 插巢與插巢預設值</h3>
  <card>
    <p>我是父元件定義的</p>
  </card>
  <br>
  <card></card>
</div>

由於未具名，所以這是屬於插槽默認的預設值插槽行為，

但是如果有需求要指定各部位顯示的話呢？

具名插槽 / 具名插槽縮寫

我們先準備第二組範例card2

<div id="app">
  <h3>具名插巢</h3>
  <card2>
    <template>我喜歡這張卡片</template>
    <!--  預設請加入 default  -->
    <template>這是卡片 2 號</template>
    <template>這是卡片腳</template>
  </card2>
</div>
<script type="module">
  const app = Vue.createApp({});
  app.component('card2', {
    template: `<div class="card" style="width: 18rem;">
      <div class="card-header">
        <slot>元件 Header</slot>
      </div>
      <div class="card-body">
        <slot>這段是預設的文字</slot>
      </div>
      <div class="card-footer">
        <slot>元件 Footer</slot>
      </div>
    </div>`
  });

  app.mount('#app');
</script>

這時我們可以發現HTML部分變成<template>標籤了，

而JS則有3塊<slot>，但是多開<slot>時沒給的名稱，

外層會不知道哪個要插哪的冏境，因此我們要給它個名稱name

app.component('card2', {
  template: `<div class="card" style="width: 18rem;">
    <div class="card-header">
      <slot name="header">元件 Header</slot>
    </div>
    <div class="card-body">
      <slot>這段是預設的文字</slot>
    </div>
    <div class="card-footer">
      <slot name="footer">元件 Footer</slot>
    </div>
  </div>`
});

中間先刻意不加name展示，而內層已經有name了，

我們外層也給跟內層配合，所以要針對各<template>下達 v-slot:(內層名稱)，

而中間剛剛刻意不加name這時如果有需要讓其也對應的話，

我們也可以幫它加個 v-slot:default 如下圖

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

此時結果就會變這樣

可以隨個人需求調整的slot就完成了～

具名縮寫插槽

嫌v-slot太長嗎? 這邊也提供懶人寫法，

以剛剛的v-slot為例，只要將其改成如下就完成囉～

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

• joker
• 2024/02/15