JavaScript–在Vue中使用插槽:slot
在Vue中使用插槽:slot
1、在子組件的template裡可以直接使用slot標簽<slot></slot>,它可以顯示父組件向子組件插入的內容。
2、slot標簽裡面可以寫一些默認值,當父組件沒有插入內容的時候它就會顯示默認值,插入內容時就隻顯示插入的內容。
3、當使用多個slot標簽時,直接插入多個內容時,每個slot標簽內都會包括所有插入的內容。
可以通過slot屬性給插入的不同內容設置指定的名字,然後給相應的slot標簽設置相應的name屬性值,就可以讓該slot標簽顯示指定的插入內容。
1、插槽是統稱,模板中的三個slot標簽都是插槽。
2、但是多個插槽需要區分,會分別設置一個name屬性。這個就叫做“具名插槽”,需要使用name屬性命名。
3、上面的是插入插槽的內容,將某個名字的內容插到子組件對應名字裡面去。這裡就是插入到name=”footer”這個插槽中。
4、一般隻有一個插槽的時候,不需要具名哦,多個才需要name來區分。
<div id="app"> <child> <!-- <div slot="header">header</div> --> <div slot="footer">footer</div> </child> </div> <script> Vue.component('child',{ //通過插槽slot可以更方便地向子組件傳遞元素,同時子組件使用插槽的內容也非常簡單 template:`<div> <slot name='header'> <h6>header插槽內容為空的默認值</h6> </slot> <div class="content">body</div> <slot name='footer'></slot> </div>` }) var vm = new Vue({ el: "#app", }) </script>
作用域插槽:使用template標簽包裹
1、<slot v-for=’item of list’ :item=item></slot>,隻確定要對列表做一個循環,但是列表的每一項怎麼顯示由外部決定。
2、所以需要給子組件傳遞一個slot,首先一定要在最外層套一個template【固定寫法】(這就是作用域插槽),同時要寫一個slot-scope屬性(屬性值是自定義的)。(如:<template slot-scope=’props’></template>,含義為子組件在使用slot的時候,會往slot裡面傳遞一個item數據,在上面使用子組件的時候就可以用這個數據,這個數據就放在slot-scope屬性值中)
3、應該使用作用域插槽的情況:當子組件要做循環或者它的某一部分應該由外部傳遞進來的時候。
使用作用域插槽時,子組件可以向父組件的插槽裡面傳數據,父組件傳遞過來的插槽如果想接收這個數據,必須在外層使用一個template,同時通過slot-scope對應的屬性名來接收傳遞過來的數據。
<div id="app"> <child> <!-- 父組件調用子組件時,給子組件插入一個作用域插槽template, 插槽裡聲明一個從子組件接收的數據item放在slot-scope的屬性(props)裡,然後通過H1模版方式展現 --> <template slot-scope="props"> <li>{{props.item}} -hello</li> </template> </child> </div> <script> Vue.component('child', { data:function(){ return{ list:[1,2,3,4] } }, //當子組件用slot時,往slot裡傳遞一個item的數據,在父組件時就能用這個數據 template:`<div> <ul> <slot v-for="item of list" :item=item> </slot> </ul> </div>` }) var vm = new Vue({ el: "#app" }) </script>
總結
本篇文章就到這裡瞭,希望能給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- Vue插槽簡介和使用示例詳解
- Vue3常用的通訊方式總結與實例代碼
- Vue3編程流暢技巧使用setup語法糖拒絕寫return
- Vue3中插槽(slot)的全部使用方法
- Vue3插槽Slot實現原理詳解