vue 作用域插槽

看文檔的時(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>



?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 在網(wǎng)上搜了很多關(guān)于作用域插槽的解釋,感覺(jué)沒(méi)有寫得很具體的吧,我認(rèn)為應(yīng)該對(duì)組件化有很深的理解才會(huì)觸及到這個(gè)問(wèn)題...
    前端司南閱讀 25,346評(píng)論 15 40
  • 首先簡(jiǎn)單說(shuō)下為什么要使用作用域插槽,有時(shí)候需要組件帶有一個(gè)可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽。 下面還是通過(guò)例子來(lái)講...
    清風(fēng)伴我行閱讀 1,034評(píng)論 0 0
  • 什么是組件? 組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝...
    youins閱讀 9,699評(píng)論 0 13
  • 組件(Component)是Vue.js最核心的功能,也是整個(gè)架構(gòu)設(shè)計(jì)最精彩的地方,當(dāng)然也是最難掌握的。...
    六個(gè)周閱讀 5,759評(píng)論 0 32
  • 【2019-3-4更新】Vue 2.6+修改了部分語(yǔ)法,對(duì)插槽的使用有了較多的更新。在本文中筆者在相應(yīng)位置給出了更...
    果汁涼茶丶閱讀 10,489評(píng)論 2 36

友情鏈接更多精彩內(nèi)容