『學習筆記』Vue3 系列 — 什麼是插槽（Slots）？
Sep 3, 2022
我們知道 Props 可以在組件間傳遞資料，但當我們想要傳遞 DOM 內容，讓組件在不同地方渲染不同的內容，同時又具有相同的樣式時，可以透過插槽（Slots）的方式，即可把父組件的內容展示在子組件中指定的位置。
主要可分為以下四種插槽：
- 匿名插槽（Slots）：把父組件內容塞到子組件的插槽裡。
- 具名插槽（Named Slots）：使用固定的插槽名稱（靜態值），把父層的內容分配到指定位置。
- 動態插槽（Dynamic Slot Names）：使用動態的插槽名稱，在父層動態指定位置。
- 作用域插槽（Scoped Slots）：讓子組件在渲染時，將一部分資料提供給插槽。
📌 子組件要先建立 slot，父組件才可以把內容塞進去。插槽內容可以傳入文本、多個元素（DOM內容），甚至是組件。
匿名插槽
渲染後會變成：
我們也可以為插槽指定默認內容。當父組件無插槽內容時，就會渲染默認內容，只要將默認內容寫在 <slot> 標籤中即可。
渲染後會變成：
具名插槽
當需要一種方式將多個插槽內容傳入到各自目標插槽的出口，此時就需要用到具名插槽了。
<template v-slot:<插槽名> >or 簡寫為<template #<插槽名> >
渲染後會變成：
動態插槽名
在父組件可以動態指定不同的 slot，把內容塞到子組件裡面
<template v-slot:[ <動態插槽名> ]>or 簡寫為<template #[ <動態插槽名> ]>
渲染後會變成：
作用域插槽
一般來說，插槽的內容無法訪問到子組件的狀態。在這裏，我們可以使用作用域插槽，把子組件的資料傳出去給父組件使用和處理，再塞回子組件的插槽裡。
📌 渲染作用域
父組件模板中的表達式只能訪問父組件的作用域；子組件模板中的表達式只能訪問子組件的作用域。
渲染後會變成：
搭配具名插槽使用 — 具名作用域插槽
渲染後會變成：
插槽上的 name 是一個Vue 特別保留的attribute，不會作為props 傳遞給插槽。
參考資料：
官方練習編譯器：
