JavaScript--在Vue中使用插槽:slot
在Vue中使用插槽:slot
1、在子組件的template里可以直接使用slot標(biāo)簽<slot></slot>,它可以顯示父組件向子組件插入的內(nèi)容。
2、slot標(biāo)簽里面可以寫一些默認(rèn)值,當(dāng)父組件沒有插入內(nèi)容的時(shí)候它就會(huì)顯示默認(rèn)值,插入內(nèi)容時(shí)就只顯示插入的內(nèi)容。
3、當(dāng)使用多個(gè)slot標(biāo)簽時(shí),直接插入多個(gè)內(nèi)容時(shí),每個(gè)slot標(biāo)簽內(nèi)都會(huì)包括所有插入的內(nèi)容。
可以通過slot屬性給插入的不同內(nèi)容設(shè)置指定的名字,然后給相應(yīng)的slot標(biāo)簽設(shè)置相應(yīng)的name屬性值,就可以讓該slot標(biāo)簽顯示指定的插入內(nèi)容。
1、插槽是統(tǒng)稱,模板中的三個(gè)slot標(biāo)簽都是插槽。
2、但是多個(gè)插槽需要區(qū)分,會(huì)分別設(shè)置一個(gè)name屬性。這個(gè)就叫做“具名插槽”,需要使用name屬性命名。
3、上面的是插入插槽的內(nèi)容,將某個(gè)名字的內(nèi)容插到子組件對(duì)應(yīng)名字里面去。這里就是插入到name="footer"這個(gè)插槽中。
4、一般只有一個(gè)插槽的時(shí)候,不需要具名哦,多個(gè)才需要name來區(qū)分。
<div id="app"> <child> <!-- <div slot="header">header</div> --> <div slot="footer">footer</div> </child> </div> <script> Vue.component('child',{ //通過插槽slot可以更方便地向子組件傳遞元素,同時(shí)子組件使用插槽的內(nèi)容也非常簡單 template:`<div> <slot name='header'> <h6>header插槽內(nèi)容為空的默認(rèn)值</h6> </slot> <div class="content">body</div> <slot name='footer'></slot> </div>` }) var vm = new Vue({ el: "#app", }) </script>
作用域插槽:使用template標(biāo)簽包裹
1、<slot v-for='item of list' :item=item></slot>,只確定要對(duì)列表做一個(gè)循環(huán),但是列表的每一項(xiàng)怎么顯示由外部決定。
2、所以需要給子組件傳遞一個(gè)slot,首先一定要在最外層套一個(gè)template【固定寫法】(這就是作用域插槽),同時(shí)要寫一個(gè)slot-scope屬性(屬性值是自定義的)。(如:<template slot-scope='props'></template>,含義為子組件在使用slot的時(shí)候,會(huì)往slot里面?zhèn)鬟f一個(gè)item數(shù)據(jù),在上面使用子組件的時(shí)候就可以用這個(gè)數(shù)據(jù),這個(gè)數(shù)據(jù)就放在slot-scope屬性值中)
3、應(yīng)該使用作用域插槽的情況:當(dāng)子組件要做循環(huán)或者它的某一部分應(yīng)該由外部傳遞進(jìn)來的時(shí)候。
使用作用域插槽時(shí),子組件可以向父組件的插槽里面?zhèn)鲾?shù)據(jù),父組件傳遞過來的插槽如果想接收這個(gè)數(shù)據(jù),必須在外層使用一個(gè)template,同時(shí)通過slot-scope對(duì)應(yīng)的屬性名來接收傳遞過來的數(shù)據(jù)。
<div id="app"> <child> <!-- 父組件調(diào)用子組件時(shí),給子組件插入一個(gè)作用域插槽template, 插槽里聲明一個(gè)從子組件接收的數(shù)據(jù)item放在slot-scope的屬性(props)里,然后通過H1模版方式展現(xiàn) --> <template slot-scope="props"> <li>{{props.item}} -hello</li> </template> </child> </div> <script> Vue.component('child', { data:function(){ return{ list:[1,2,3,4] } }, //當(dāng)子組件用slot時(shí),往slot里傳遞一個(gè)item的數(shù)據(jù),在父組件時(shí)就能用這個(gè)數(shù)據(jù) template:`<div> <ul> <slot v-for="item of list" :item=item> </slot> </ul> </div>` }) var vm = new Vue({ el: "#app" }) </script>
總結(jié)
本篇文章就到這里了,希望能給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Three.js+React實(shí)現(xiàn)帶火焰效果的艾爾登法環(huán)
《艾爾登法環(huán)》是最近比較火的一款游戲,觀察可以發(fā)現(xiàn)它的?Logo?是由幾個(gè)圓弧和線段構(gòu)成。本文使用?React?+?Three.js?技術(shù)棧,實(shí)現(xiàn)具有火焰效果艾爾登法環(huán)?Logo,感興趣的可以了解一下2022-03-03js實(shí)現(xiàn)不重復(fù)導(dǎo)入的方法
這篇文章主要介紹了js實(shí)現(xiàn)不重復(fù)導(dǎo)入的方法,實(shí)例分析了JavaScript基于文件與字符串判斷操作實(shí)現(xiàn)JS文件不重復(fù)導(dǎo)入的相關(guān)技巧,需要的朋友可以參考下2016-03-03原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04jquery ajax應(yīng)用中iframe自適應(yīng)高度問題解決方法
很多管理系統(tǒng)中,都使用iframe進(jìn)行信息內(nèi)容的展示方式,或者作為主菜單的鏈接展示內(nèi)容。使用iframe的問題就是自適應(yīng)高度的問題2014-04-04JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽調(diào)整div大小
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽調(diào)整div大小,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03