Vue中slot的使用（通俗易懂）

個人理解：

是對元件的擴充套件，通過slot插槽向元件內部指定位置傳遞內容，通過slot可以父子傳參；

開發背景(slot出現時為了解決什麼問題)：

正常情況下,hello world

在元件標籤child中的span標籤會被元件模板template內容替換掉，當想讓元件標籤child中內容傳遞給元件時需要使用slot插槽；

slot

的通俗理解

是「佔坑」，在元件模板中佔好了位置，當使用該元件標籤時候，元件標籤裡面的內容就會自動填坑（替換元件模板中位置），當插槽也就是坑」

myslot

」>有命名時，元件標籤中使用屬性slot=

」myslot

」的元素就會替換該對應位置內容；

slot使用

1、（匿名插槽）元件中有單個或多個未命名slot標籤時，如下：

hello world

這是在slot上新增了樣式

這是擁有命名的slot的預設內容

會輸出：兩個紅色的

hello world

，以及乙個使用

slot

的預設內容

注意：在slot標籤新增樣式無效。擁有命名的插槽不能被不含slot屬性的標籤內容替換，會顯示slot的預設值（具名slot具有對應性）；

2、（具名插槽）元件中有多個命名的

slot插槽時，可以實現父元件對子元件的指定位置顯示內容或傳參，如下：

hello world

hello world}

這是擁有命名的slot的預設內容

3、作用域插槽！！：

使用時候子元件標籤中要有」

scopename

」>標籤，再通過scopename.childprop就可以呼叫子元件模板中的childprop繫結的資料，所以作用域插槽是一種子傳父傳參的方式，解決了普通slot在parent中無法訪問child資料的去問題；

作用域插槽代表性的用例是列表元件，允許在parent父元件上對列表項進行自定義顯示，如下該items的所有列表項都可以通過slot定義後傳遞給父元件使用，也就是說資料是相同的，不同的場景頁面可以有不同的展示方式：

slot-scope

="props">}