前言

上禮拜跟老公聊天，聊到最近在研究slot，由於老公沒有學過前端技術，我突發奇想用住在阿公阿嬤家的孩子當解釋，他就聽懂了，覺得自己好棒棒XD但並沒有放在心上，直到昨天Pam問我一些slot的問題，我們先就文件上的文字討論，好像沒有很好的效果，我有點不好意思的說其實我是這樣理解的...講完，Pam表示她好像懂了，突然覺得雖然這樣理解有點好笑，但效果似乎還不錯，就想說可以來寫一篇了，也許可以幫助到一些人吧！就算大家邊看邊笑也沒關係，好久沒有覺得值得寫的東西了哈哈哈哈哈，終於又浮出檯面了。

Slot

我把它想成一個小孩，就先拿我大兒子樂咖來講故事好了XD，假設他目前跟阿嬤一起住，所以人在阿嬤家，但媽媽我在家裡放了一個他的備忘錄，接收樂咖的訊息。

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <!-- 樂咖在阿嬤家講的話 -->
    <p>樂咖想要拿家裡的玩具車</p>
  </PapaMama>
</template>

<!-- PapaMama.vue -->
<script setup></script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
      <slot></slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid {
  border: 3px dotted blue;
}
</style>

• 畫面顯示如下：
  

Fallback Content

我們可以預設文字，也就是所謂的fallback Content在slot中，當樂咖還沒去阿嬤家時，就會顯示預設文字

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <!-- 樂咖在阿嬤家講的話，先把下面的話註解掉-->
    <!-- <p>樂咖想要拿家裡的玩具車</p> -->
  </PapaMama>
</template>

<!-- PapaMama.vue -->
<script setup></script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
       <!-- 在slot中加上預設文字 -->
      <slot>樂咖還在這裡，沒有去阿嬤家喔！</slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid {
  border: 3px dotted blue;
}
</style>

• 畫面顯示如下：
  

Named Slots

當孩子（Slot）只有一個時，永遠不會搞錯，但是當有一個以上時，該怎麼辦呢？相當然爾，就是幫他們命名囉！
樂咖的弟弟嗨啾登場，全部都去阿嬤家吧！現實生活中，如果這樣安靜個幾天，該有多好～～～

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <template class="first-grandson" v-slot:leka>
      <!-- 樂咖在阿嬤家講的話 -->
      <p>樂咖想要拿家裡的玩具車</p>
    </template>
    <template class="second-grandson" v-slot:hichew>
      <!-- 嗨啾在阿嬤家講的話 -->
      <p>嗨啾想要拿家裡的泰迪熊</p>
    </template>
  </PapaMama>
</template>

<style lang="scss" scoped></style>

<!-- PapaMama.vue -->
<script setup></script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="leka"></slot>
    </section>
    <section class="second-kid">
      <h2>嗨啾備忘錄</h2>
      <!-- 嗨啾在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="hichew"></slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid, .second-kid {
  border: 3px dotted blue;
}
</style>

• 畫面顯示如下：
  

Scoped Slot

好的，媽媽接收到訊息後，趕快把兩兄弟分別想要的玩具車跟泰迪熊寄送到阿嬤家去，好讓兩兄弟在阿嬤家開開心心，才會多待幾天呀！你說是不是呢XD

• 從自己家把東西送阿嬤家兄弟手上的行為就是Scoped Slot

• 媽媽在家用v-bind將要傳送的玩具跟泰迪熊（資料）綁定給小孩（slot）

<!-- PapaMama.vue -->
<script setup>
const toy = "🚗🚗🚗🚗🚗🚗🚗🚗"
const teddy = "🧸🧸🧸🧸🧸🧸🧸🧸"
</script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="leka" :toy="toy"></slot>
    </section>
    <section class="second-kid">
      <h2>嗨啾備忘錄</h2>
      <!-- 嗨啾在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="hichew" :teddy="teddy"></slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid, .second-kid {
  border: 3px dotted blue;
}
</style>

• 以樂咖為例：在程式碼上加上v-slot:leka="lekaProps"，並在要接收的位置加上{{ lekaProps.toy }}，就可以成功收到媽媽寄來的小車車囉！

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <template class="first-grandson" v-slot:leka="lekaProps">
      <!-- 樂咖在阿嬤家講的話 -->
      <p>樂咖想要拿家裡的玩具車</p>
      
      <!-- 收到媽媽寄來的玩具車 -->
      <div>{{ lekaProps.toy }}</div>
      
    </template>
    <template class="second-grandson" v-slot:hichew="hichewProps">
      <!-- 嗨啾在阿嬤家講的話 -->
      <p>嗨啾想要拿家裡的泰迪熊</p>
      
      <!-- 收到媽媽寄來的泰迪熊 -->
      <div>{{ hichewProps.teddy }}</div>
      
    </template>
  </PapaMama>
</template>

<style lang="scss" scoped></style>

• 畫面顯示如下：
  

後記

不知道這樣的解釋有沒有幫助大家理解，但我自己想了一遍後，對於slot又更清楚了一些，雖然覺得自己的學習方式真的又怪又好笑，但可以理解就好了哈哈哈哈哈！

參考資料：複用元件的好幫手：Vue Slots(v-slot、Scoped Slots)