一、認識插槽Slot

在開發中，我們會經常封裝一個個可復用的組件：

• 前面我們會通過props傳遞給組件一些數據，讓組件來進行展示；
• 但是為了讓這個組件具備更強的通用性，我們不能將組件中的內容限制為固定的div、span等等這些元素；
• 比如某種情況下我們使用組件，希望組件顯示的是一個按鈕，某種情況下我們使用組件希望顯示的是一張圖片；
• 我們應該讓使用者可以決定某一塊區域到底存放什么內容和元素；

舉個栗子：假如我們定制一個通用的導航組件 - NavBar

• 這個組件分成三塊區域：左邊-中間-右邊，每塊區域的內容是不固定；
• 左邊區域可能顯示一個菜單圖標，也可能顯示一個返回按鈕，可能什么都不顯示；
• 中間區域可能顯示一個搜索框，也可能是一個列表，也可能是一個標題，等等；
• 右邊可能是一個文字，也可能是一個圖標，也可能什么都不顯示；

二、如何使用插槽slot？

這個時候我們就可以來定義插槽slot：

• 插槽的使用過程其實是抽取共性、預留不同； p我們會將共同的元素、內容依然在組件內進行封裝；
• 同時會將不同的元素使用slot作為占位，讓外部決定到底顯示什么樣的元素；

如何使用slot呢？

• Vue中將 <slot> 元素作為承載分發內容的出口；
• 在封裝組件中，使用特殊的元素<slot>就可以為封裝組件開啟一個插槽；
• 該插槽插入什么內容取決于父組件如何使用；

我們一個組件MySlotCpn.vue：該組件中有一個插槽，我們可以在插槽中放入需要顯示的內容；
我們在App.vue中使用它們：我們可以插入普通的內容、html元素、組件元素，都是可以的；

三、插槽的默認內容

有時候我們希望在使用插槽時，如果沒有插入對應的內容，那么我們需要顯示一個默認的內容：
當然這個默認的內容只會在沒有提供插入的內容時，才會顯示；

三、多個插槽的效果

我們先測試一個知識點：如果一個組件中含有多個插槽，我們插入多個內容時是什么效果？

• 我們會發現默認情況下每個插槽都會獲取到我們插入的內容來顯示；
  

四、具名插槽的使用

事實上，我們希望達到的效果是插槽對應的顯示，這個時候我們就可以使用 具名插槽：

• 具名插槽顧名思義就是給插槽起一個名字，<slot> 元素有一個特殊的 attribute：name；
• 一個不帶 name 的slot，會帶有隱含的名字 default；
  

五、動態插槽名

什么是動態插槽名呢？

• 目前我們使用的插槽名稱都是固定的；
• 比如 v-slot:left、v-slot:center等等；
• 我們可以通過 v-slot:[dynamicSlotName]方式動態綁定一個名稱；
  

六、具名插槽使用的時候縮寫

具名插槽使用的時候縮寫：

• 跟 v-on 和 v-bind 一樣，v-slot 也有縮寫；
• 即把參數之前的所有內容 (v-slot:) 替換為字符 #；
  

七、渲染作用域

在Vue中有渲染作用域的概念：

• 父級模板里的所有內容都是在父級作用域中編譯的；
• 子模板里的所有內容都是在子作用域中編譯的；

如何理解這句話呢？我們來看一個案例：

• 在我們的案例中ChildCpn自然是可以讓問自己作用域中的title內容的；
• 但是在App中，是訪問不了ChildCpn中的內容的，因為它們是跨作用域的訪問；
  

八、認識作用域插槽

但是有時候我們希望插槽可以訪問到子組件中的內容是非常重要的：

• 當一個組件被用來渲染一個數組元素時，我們使用插槽，并且希望插槽中沒有顯示每項的內容；
• 這個Vue給我們提供了作用域插槽；

我們來看下面的一個案例：
1.在App.vue中定義好數據
2. 傳遞給ShowNames組件中
3. ShowNames組件中遍歷names數據
4. 定義插槽的prop
5. 通過v-slot:default的方式獲取到slot的props
6. 使用slotProps中的item和index

九、獨占默認插槽的縮寫

如果我們的插槽是默認插槽default，那么在使用的時候 v-slot:default="slotProps"可以簡寫為v-slot="slotProps"

并且如果我們的插槽只有默認插槽時，組件的標簽可以被當做插槽的模板來使用，這樣，我們就可以將 v-slot 直 接用在組件上：

十、默認插槽和具名插槽混合

但是，如果我們有默認插槽和具名插槽，那么按照完整的template來編寫

只要出現多個插槽，請始終為所有的插槽使用完整的基于 <template> 的語法：

總結

以上是生活随笔為你收集整理的Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。