您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue的slot-scope/scope屬性如何用的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue的slot-scope/scope屬性如何用文章都會有所收獲,下面我們一起來看看吧。
在vue 2.5.0+ 中slot-scope替代了 scope
template 的使用情形為,我們已經(jīng)封裝好一個組建,預留了插槽,使用 的插槽
首先 我們的創(chuàng)建一個組建
組建很簡單有一個 slot,slot有兩個屬性 a=123,b=msg
<template> <div> <div>下面是一個slot</div> <slot a="123" b="msg" ></slot> </div> </template>
接下來我們引入組建,并使用組建,引入的組建名 為mysolt,并使用組建
然后使用 template ,并使用scope/slot-scope,
<div> <mysolt> <template scope="msg"> <div>下面是solt的props 調(diào)用</div> <div>{{msg}}</div> <div>{{msg.a}}</div> <div>{{msg.b}}</div> </template> </mysolt> </div>
其實就是 template 通過scope/slot-scope 屬性 調(diào)用組建 slot 的屬性,以達到可以調(diào)用組建屬性實現(xiàn)復雜的嵌套;
實例中 我使用 msg 來重命名 slot 的屬性對象,即 msg 為slot 的{a:'123',b:'msg'}, 就可以通過使用msg 在template 中使用slot的屬性
(注意:當前層 如果有data已經(jīng)聲明過 msg,它們之間互不干擾,template 的msg 以slot 的為準)
如果我給當前 data的msg={c:111}如下:
<div>{{msg.c}}</div> <mysolt> <template scope="msg"> <div>下面是solt的msg</div> <div>{{msg}}</div> <div>{{msg.a}}</div> <div>{{msg.b}}</div> <div>{{msg.c}}</div> </template> </mysolt>
Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
關(guān)于“vue的slot-scope/scope屬性如何用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue的slot-scope/scope屬性如何用”知識都有一定的了解,大家如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。