看文檔的時(shí)候總會(huì)懵逼 找了其他大佬的博客看了一下 發(fā)現(xiàn)還是"俗" 一點(diǎn)的解釋比較適合我
作用域插槽是啥?
- 官方一點(diǎn)的:父組件應(yīng)用子組件可以給插槽填充內(nèi)容,但一般只填充html標(biāo)簽,里邊的數(shù)據(jù)信息要由插槽自己提供,這個(gè)過(guò)程稱為作用域插槽
- 自己總結(jié)的俗話:父組件在用子組件來(lái)填充插槽的時(shí)候 有時(shí)候需要用到子組件里面插槽的數(shù)據(jù) .
子組件文件插槽上帶的數(shù)據(jù) 在父組件的子組件標(biāo)簽里 讓一個(gè)標(biāo)簽 帶有slot-scope="xxx" 去接收 以便在下面進(jìn)行調(diào)用
目前我的理解就是 在父子組件之間體現(xiàn)的比較多 所以就用父子組件舉例
比如說(shuō) 我在子組件文件里面來(lái)個(gè)插槽
//這是子組件文件
<slot name="jinmao" uname="haomeili" age="250" gender="woman" hobby="eatFoots">
-----分割線 下面是父組件--------
//這里是父組件
//<com-haomeili> 是注冊(cè)后的子組件標(biāo)簽
<com-haomeili>
<p slot-scope="recData">
//這里的recData 就是接收到上面子組件文件里面name叫jinmao的插槽里面?zhèn)鬟f的數(shù)據(jù)
//就可以進(jìn)行如下使用
我的土金毛叫{{recData.uname}},她今年{{recData.age}}歲了,她的性別是{{recData.gender}},愛(ài)好是{{recData.hobby}}
</p>