建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯網營銷解決方案
Vue3 Slot—插槽全家桶使用詳解
插槽 slot 就是子組件中提供給父組件使用的一個占位符，用
插槽被分為三種：匿名插槽、具名插槽、作用域插槽。
1、匿名插槽
沒有名字的插槽就是匿名插槽，組件可以放置一個或多個
子組件內放置一個插槽：
父組件使用插槽：
哈哈哈哈哈哈
// 或
哈哈哈哈哈哈
如果有多個 slot 時，父組件中需要填充的內容就會被多次插入。
2、具名插槽
組件內可以放置多個插槽，如果都是匿名插槽的時候，渲染的都是父組件默認內容，無法實現插入多個不同內容，此時就需要給插槽設置名字以便于區(qū)分它們。
具名插槽就是給插槽取個名字，可以把組件內多個插槽放在不同的地方，父級填充內容時，可以根據名字把內容填充到對應的插槽內。
定義為多個插槽的組件：
頭部：
主體：
底部：
父組件填充內容需要對象插槽名：
我是header
中間匿名插槽
我是 footer
可以簡寫為：
我是header
中間匿名插槽
我是 footer
3、作用域插槽
匿名插槽和具名插槽父組件只能訪問父組件中編譯的內容，子組件只能訪問子組件內的內容，有時我們在父組件需要訪問到子組件中的內容，此時 vue 給我們提供了作用域插槽。
作用域插槽子組件內定義要傳送的數據：
在調用組件的父組件內接收數據：
{{ data }}
4、動態(tài)插槽
有多個插槽，不同狀態(tài)下展示不同的插槽，此時我們就可以使用動態(tài)插槽，插槽名是一個變量名，其值可以是動態(tài)修改的。
我們可以做一個類似于選項卡的效果：
父組件代碼：
我是{{ name }}插槽
子組件代碼：
此時就可以動態(tài)地選擇其中任意一個插槽展示。
當前文章：Vue3 Slot—插槽全家桶使用詳解
標題URL：http://www.5511xx.com/article/coghscc.html
