vue 插槽簡(jiǎn)介及使用示例
Vue的插槽，是一種內(nèi)容分發(fā)機(jī)制，但是我感覺(jué)它更加像組件的一種占位符的概念，通過(guò)插槽，等待組件外部傳入復(fù)雜的內(nèi)容。
使用插槽的好處
在以前的例子中todo-item插槽直接寫在了todo-list插槽中，其實(shí)是比較不合理的，它會(huì)導(dǎo)致todo-list插槽比較死板，無(wú)法重用更多的其他組件。
Vue.component('todo-list', { template: `<ul> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'></todo-item></ul> `, data: function() { return { }; }, methods:{ } });
通過(guò)插槽化改造，則可以允許使用todo-list組件的用戶自行的傳入想要使用的todo-item，而不是一個(gè)固定的內(nèi)容。
插槽改造過(guò)程
改造示例：
將todo-item組件從todo-list組件中移除，放到頁(yè)面的html代碼中。 將todo-list組件中原todo-item的位置修改為 因?yàn)閠odo-item移到了頁(yè)面html代碼中，所以需要將todo-list的data中的list，移回全局vue中，防止組件找不到list導(dǎo)致v-for報(bào)錯(cuò)；handleDelete同理也要移至全局vue中<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <meta http-equiv='X-UA-Compatible' content='ie=edge' /> <title>Document</title> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'></todo-item> </todo-list> </div> <script> Vue.component('todo-list', { template: `<ul> <slot></slot></ul> `, data: function() { return { }; }, methods:{ } }); Vue.component('todo-item', { props: { title: String, del: { type: Boolean, default: false } }, template: ` <li> <span v-if='!del'>{{title}}</span> <span v-else style='text-decoration:line-through'>{{title}}</span> <button v-show='!del' @click='handleClick'>刪除</button> </li>`, data: function() { return {}; }, methods: { handleClick(){console.log('點(diǎn)擊刪除按鈕！');this.$emit(’delete’,this.title); } } }); var vm = new Vue({ el: '#app', data: { list: [ {title: '新課程1',del: false }, {title: '新課程2',del: true }, {title: '新課程3',del: false } ] }, methods: { handleDelete(vtitle){console.log('刪除工程！',vtitle) } } }); </script> </body></html>
效果和改造前是一模一樣的。
插槽的種類
處理默認(rèn)插槽外，還有具名插槽，作用域插槽等等。
所謂的具名插槽就是指帶有名稱的插槽，解決的是一個(gè)組件中存在多個(gè)插槽的業(yè)務(wù)場(chǎng)景。比如有一個(gè)母版頁(yè)組件，希望區(qū)分頁(yè)頭，頁(yè)尾和頁(yè)面主體。實(shí)現(xiàn)如下效果：
<div class='container'> <header> <!-- 我們希望把頁(yè)頭放這里 --> </header> <main> <!-- 我們希望把主要內(nèi)容放這里 --> </main> <footer> <!-- 我們希望把頁(yè)腳放這里 --> </footer></div>
那么這個(gè)組件應(yīng)該這樣編寫
<div class='container'> <header> <slot name='header'></slot> </header> <main> <slot></slot> </main> <footer> <slot name='footer'></slot> </footer></div>
具體調(diào)用組件的位置，則有兩種寫法：
一種是2.6之前的寫法。
<組件名><p slot='header'>頭部段落</p><p>主段落</p><p slot='footer'>尾部段落</p></組件名>
一種是2.6之后的寫法
<組件名><template v-slot:header> <p>頭部段落</p></template><p>主段落</p><template v-slot:footer> <label>尾部段落</label></template></組件名>
按照2.6之后的寫法，我們嘗試將todo-item組件中增加一個(gè)前置lable和后置lable
在todo-item組件的template中的html中增加slot插槽，并標(biāo)記名稱 html頁(yè)面的組件調(diào)用位置，使用template和v-slot的語(yǔ)法插入內(nèi)容<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <meta http-equiv='X-UA-Compatible' content='ie=edge' /> <title>Document</title> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'><template v-slot:pretext> <label>前置文字</label></template><template v-slot:suftext> <label>后置文字</label></template> </todo-item> </todo-list> </div> <script> Vue.component('todo-list', { template: `<ul> <slot></slot></ul> `, data: function() { return { }; }, methods:{ } }); Vue.component('todo-item', { props: { title: String, del: { type: Boolean, default: false } }, template: ` <li> <slot name='pretext'></slot> <span v-if='!del'>{{title}}</span> <span v-else style='text-decoration:line-through'>{{title}}</span> <button v-show='!del' @click='handleClick'>刪除</button> <slot name='suftext'></slot> </li>`, data: function() { return {}; }, methods: { handleClick(){console.log('點(diǎn)擊刪除按鈕！');this.$emit(’delete’,this.title); } } }); var vm = new Vue({ el: '#app', data: { list: [ {title: '新課程1',del: false }, {title: '新課程2',del: true }, {title: '新課程3',del: false } ] }, methods: { handleDelete(vtitle){console.log('刪除工程！',vtitle) } } }); </script> </body></html>
作用域插槽：作用域插槽可以接收子組件傳遞的值，并根據(jù)不同的值顯示不同的內(nèi)容。如根據(jù)用戶根據(jù)返回的值控制樣式信息。
作用域插槽示例：
為todo-item的data屬性增加返回值vRandomdata: function() { return { vrandom:Math.random() };}, 在todo-item的template的html中通過(guò)v-bind綁定組件中的屬性。
template: ` <li> <slot name='pretext' :val='vrandom'></slot> <span v-if='!del'>{{title}}</span> <span v-else style='text-decoration:line-through'>{{title}}</span> <button v-show='!del' @click='handleClick'>刪除</button> <slot name='suftext'></slot> </li>`, 在使用組件時(shí)通過(guò)模板語(yǔ)法調(diào)用綁定的變量
<div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'><template v-slot:pretext='{val}'> <label>前置文字{{val}}</label></template><template v-slot:suftext> <label>后置文字</label></template> </todo-item> </todo-list> </div>
全部html代碼為
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <meta http-equiv='X-UA-Compatible' content='ie=edge' /> <title>Document</title> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'><template v-slot:pretext='{val}'> <label>前置文字{{val}}</label></template><template v-slot:suftext> <label>后置文字</label></template> </todo-item> </todo-list> </div> <script> Vue.component('todo-list', { template: `<ul> <slot></slot></ul> `, data: function() { return { }; }, methods:{ } }); Vue.component('todo-item', { props: { title: String, del: { type: Boolean, default: false } }, template: ` <li> <slot name='pretext' :val='vrandom'></slot> <span v-if='!del'>{{title}}</span> <span v-else style='text-decoration:line-through'>{{title}}</span> <button v-show='!del' @click='handleClick'>刪除</button> <slot name='suftext'></slot> </li>`, data: function() { return { vrandom:Math.random() }; }, methods: { handleClick(){console.log('點(diǎn)擊刪除按鈕！');this.$emit(’delete’,this.title); } } }); var vm = new Vue({ el: '#app', data: { list: [ {title: '新課程1',del: false }, {title: '新課程2',del: true }, {title: '新課程3',del: false } ] }, methods: { handleDelete(vtitle){console.log('刪除工程！',vtitle) } } }); </script> </body></html>
組件的插槽還有一種帶默認(rèn)值的用法：在slot中增加默認(rèn)內(nèi)容
template: ` <li> <slot name='pretext' :val='vrandom'></slot> <span v-if='!del'>{{title}}</span> <span v-else style='text-decoration:line-through'>{{title}}</span> <button v-show='!del' @click='handleClick'>刪除</button> <slot name='suftext'>默認(rèn)尾部</slot> </li>`,
如果調(diào)用組件時(shí)沒(méi)有在插槽位置插入內(nèi)容，則html展示以默認(rèn)內(nèi)容進(jìn)行填充，如果有插內(nèi)容則以插入值填充。
<div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'><template v-slot:pretext='{val}'> <label>前置文字{{val}}</label></template><template v-slot:suftext> <label>后置文字</label></template> </todo-item> </todo-list> </div>
效果
<div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'><template v-slot:pretext='{val}'> <label>前置文字{{val}}</label></template><template v-slot:suftext></template> </todo-item> </todo-list> </div>
或者
<div id='app'> <todo-list> <todo-item v-on:delete='handleDelete' v-for='item in list' data-wen='wen' :title='item.title' :del='item.del'><template v-slot:pretext='{val}'> <label>前置文字{{val}}</label></template> </todo-item> </todo-list> </div>
以上就是vue 插槽簡(jiǎn)介及使用示例的詳細(xì)內(nèi)容，更多關(guān)于vue 插槽的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. PHP使用Swagger生成好看的API文檔2. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條3. Python3 json模塊之編碼解碼方法講解4. Python 制作查詢商品歷史價(jià)格的小工具5. Python 如何調(diào)試程序崩潰錯(cuò)誤6. Python 利用Entrez庫(kù)篩選下載PubMed文獻(xiàn)摘要的示例7. ASP基礎(chǔ)知識(shí)VBScript基本元素講解8. python使用jenkins發(fā)送企業(yè)微信通知的實(shí)現(xiàn)9. Python sublime安裝及配置過(guò)程詳解10. Python 合并拼接字符串的方法
網(wǎng)公網(wǎng)安備