今天要來學習有關 slot 的用法，slot 就是子元件模板裡的內容擺放位，而內容則由父元件提供，子元件只負責外框與樣式
eg.

<template>
  <button class="fancy-btn">
    <slot>（預設文字）</slot> <!-- 會丟來這邊 -->
  </button>
</template>

<style scoped>
.fancy-btn { padding: 8px 12px; border-radius: 8px; }
</style>

<script setup>
import FancyButton from './components/slot.vue'
</script>

<template>
  <FancyButton>Click me!</FancyButton>

  <FancyButton>
    <span style="color:red">Delete</span>
  </FancyButton>

  <FancyButton />
</template>

元件可以傳入一般的文字，也可傳元件(元素)，若不傳入則會顯示子元件本身的預設文字

slot 的作用域

slot內容用的是父元件的作用域，無法存取子元件的 data
eg.
子元件：

<script setup>
import { ref } from 'vue';
const message = ref('son')
</script>

<template>
  <button class="fancy-btn">
    <slot>{{message}}</slot>
  </button>
</template>


<style scoped>
.fancy-btn { padding: 8px 12px; border-radius: 8px; }
</style>

父元件：

<script setup>
import { ref } from 'vue'
import FancyButton from './components/slot.vue'
const message = ref('father')
</script>

<template>
  <FancyButton>{{ message }}</FancyButton>
</template>

結果顯示

具名的 slot

我們可以在子元件使用 name="插槽名字" 來為插槽命名，接著父元件使用 v-slot:插槽名字 來識別插槽以傳入所需元素，v-slot 也可簡寫為 #插槽名字 會更加方便
子元件：

<template>
  <div class="desk">
    <div><slot name="computer">empty</slot></div>
    <div><slot name="keyboard">empty</slot></div>
    <div><slot name="mouse">empty</slot></div>
  </div>
</template>

父元件：

<script setup>
import Desk from './components/slot.vue'
</script>

<template>
  <Desk>
    <template v-slot:computer>white computer</template>
    <template #keyboard>pink keyboard</template>
    <template #mouse>pink mouse</template>
  </Desk>
</template>

ref:
https://ithelp.ithome.com.tw/articles/10273298
https://zh-hk.vuejs.org/guide/components/slots.html