建站
咨詢
售后
建站咨詢
新聞中心
插槽 slot 就是子組件中提供給父組件使用的一個(gè)占位符，用
插槽被分為三種：匿名插槽、具名插槽、作用域插槽。
1、匿名插槽
沒(méi)有名字的插槽就是匿名插槽，組件可以放置一個(gè)或多個(gè)
子組件內(nèi)放置一個(gè)插槽：
父組件使用插槽：
哈哈哈哈哈哈
// 或
哈哈哈哈哈哈
如果有多個(gè) slot 時(shí)，父組件中需要填充的內(nèi)容就會(huì)被多次插入。
2、具名插槽
組件內(nèi)可以放置多個(gè)插槽，如果都是匿名插槽的時(shí)候，渲染的都是父組件默認(rèn)內(nèi)容，無(wú)法實(shí)現(xiàn)插入多個(gè)不同內(nèi)容，此時(shí)就需要給插槽設(shè)置名字以便于區(qū)分它們。
具名插槽就是給插槽取個(gè)名字，可以把組件內(nèi)多個(gè)插槽放在不同的地方，父級(jí)填充內(nèi)容時(shí)，可以根據(jù)名字把內(nèi)容填充到對(duì)應(yīng)的插槽內(nèi)。
定義為多個(gè)插槽的組件：
頭部：
主體：
底部：
父組件填充內(nèi)容需要對(duì)象插槽名：
我是header
中間匿名插槽
我是 footer
可以簡(jiǎn)寫為：
我是header
中間匿名插槽
我是 footer
3、作用域插槽
匿名插槽和具名插槽父組件只能訪問(wèn)父組件中編譯的內(nèi)容，子組件只能訪問(wèn)子組件內(nèi)的內(nèi)容，有時(shí)我們?cè)诟附M件需要訪問(wèn)到子組件中的內(nèi)容，此時(shí) vue 給我們提供了作用域插槽。
作用域插槽子組件內(nèi)定義要傳送的數(shù)據(jù)：
在調(diào)用組件的父組件內(nèi)接收數(shù)據(jù)：
{{ data }}
4、動(dòng)態(tài)插槽
有多個(gè)插槽，不同狀態(tài)下展示不同的插槽，此時(shí)我們就可以使用動(dòng)態(tài)插槽，插槽名是一個(gè)變量名，其值可以是動(dòng)態(tài)修改的。
我們可以做一個(gè)類似于選項(xiàng)卡的效果：
父組件代碼：
我是{{ name }}插槽
子組件代碼：
此時(shí)就可以動(dòng)態(tài)地選擇其中任意一個(gè)插槽展示。
網(wǎng)站名稱：Vue3 Slot—插槽全家桶使用詳解
分享路徑：http://m.5511xx.com/article/coghscc.html
