Vue3—06—插槽slot
阿新 • • 發佈：2021-09-19
一、插槽用來幹什麼？
可以用props來轉遞資料，
但是傳遞html標籤這種結構怎麼做？使用插槽slot；
slot可以讓父元件來決定，這一塊到底放什麼標籤、內容、元素；
如果有多個插槽，並且滅有具名插槽和動態插槽名，如下圖所以，那麼每個插槽都會被插入父元件的內容，所以下圖會有九個內容；
2.具名插槽
具名插槽也可以簡寫：
3.動態插槽名
可以使用【】來像v-blind一樣，獲取元件邏輯data裡的屬性，然後給標籤的slot屬性賦值；
二、作用域插槽
子元件的資料如果不通過emit和on是不可能傳到父元件的，父元件也無法使用；
這個時候，父元件使用v-slot=“自定義一個名字”會獲取子元件slot標籤裡的值；
這個時候就不用通過子父元件才可以傳資料了，直接通過作用域插槽就可以傳資料；
2.插槽可以縮寫
如果只使用一個插槽那麼可以簡寫，但如果我們使用了多個插槽，並且用到了具名插槽，就不可以簡寫；