昨天我們認識了 vue 的 <teleport> 是由內往外傳送

今天我們來略懂傳來傳去的 slot
官方文件

在閱讀前要先了解是目的是"傳送元素+值"和 props 只傳值有很大的不同!
(slot 也可能只傳送值 or 只傳送元素)

slot 分類

• slot（普通插槽）
• named-slots（具名插槽）
• dynamic-slot-names（動態插槽）
• scoped-slots（作用域插槽）
• named-scoped-slots (具名作用域插槽)
• renderless-components (無渲染組件)
  • 很特別
  • 可以參考官方

普通插槽

單純傳遞 文字內容，兒子只有一個 slot

<FancyButton>
  Click me! <!-- slot content -->
</FancyButton>
<!-- 上下兩個為不同vue檔案 -->
<button class="fancy-btn">
  <slot></slot> <!-- slot outlet -->
</button>

動手玩玩看

具名插槽

兒子有多個 slot 的時候就要給名字
(js export 的時候也是有 default 的概念在)

  <BaseLayout>
    <template #header>
      <h1>標題參數</h1>
    </template>

    <template #default>
      <p>文章內容參數</p>
    </template>

    <template #footer>
      <p>footer 參數</p>
    </template>
  </BaseLayout>
<!-- 上下兩個為不同vue檔案 -->
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 沒有用 name 所以外面要用 #default -->
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>

動手玩玩看

動態插槽

和 <component :is> 動態元件一樣可以做到動態插槽
例如有一個下拉選單，選擇不同選項去改變標表格的標籤元素&樣式

<base-layout>
<!-- 完整寫法 -->
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

<!-- 縮寫 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>
```html

---

### 作用域插槽

```html
<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>
<!-- 上下兩個為不同vue檔案 -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

動手玩玩看

具名作用域插槽

筆者剛開始使用 vue 的時候是直接用 vuetify
常常會看到 <template v-slot:item.glutenfree="{ item }">
或是 <template #item.glutenfree="{ item }"> 這樣範例，當時都搞不清楚

其實拆解後沒有很複雜

• item.glutenfree 只有2種true或是false，因此可以在兒子定義2種不同的元素去渲染 checkbox
• 使用作用域插槽解構出 item
• 在 v-model 內使用 item.glutenfree

<!-- https://vuetifyjs.com/en/components/data-tables/#simple-checkbox -->
<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.glutenfree="{ item }">
        <v-simple-checkbox
          v-model="item.glutenfree"
          disabled
        ></v-simple-checkbox>
      </template>
    </v-data-table>
  </div>
</template>

codepen範例

補充

vue 早期被棄用的 slot

在vue2.6之前官方文件有 slot slot-scope 後來都改成叫做 v-slot
https://blog.51cto.com/u_15476057/4925476

參考文章

vue2 slot:
https://v2.cn.vuejs.org/v2/guide/components-slots.html

kuro:
https://book.vue.tw/CH2/2-4-slots.html

Alysa Chan:
https://ithelp.ithome.com.tw/articles/10273298?sc=iThomeR