從組件封裝看Vue的作用域插槽的實(shí)現(xiàn)
作用域插槽不是那么直觀的一個(gè)概念。Vue文檔使用了一段描述性的話來(lái)解釋作用域插槽:
有的時(shí)候你希望提供的組件帶有一個(gè)可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽
……
但是在我們應(yīng)用的某些部分,我們希望每個(gè)獨(dú)立的待辦項(xiàng)渲染出和 todo.text 不太一樣的東西。這也是作用域插槽的用武之地。
但在我看來(lái),至少是第一次讀到的時(shí)候,這段話相當(dāng)不好理解。插槽不是分發(fā)內(nèi)容到子組件嗎,為什么還要從子組件中獲取數(shù)據(jù)?不是已經(jīng)有了通過(guò)emit事件的方法從子組件向父組件傳遞數(shù)據(jù)嗎,為什么需要它?作用域插槽到底是來(lái)干嘛的?……
在瀏覽了不少博客、自己思考“如果不這么做,就會(huì)怎么樣”再動(dòng)手實(shí)踐之后,作用域插槽的含義才逐漸明了。其實(shí)作用域插槽提供了一種封裝可復(fù)用組件的新思路。下面我會(huì)從最簡(jiǎn)單的例子開(kāi)始。
簡(jiǎn)單的展示列表
現(xiàn)在我們做一個(gè)純展示用途的列表組件,如下圖所示:
第一個(gè)例子先用slot來(lái)分發(fā)內(nèi)容
<template> <div class="list"> <div class="list-title"> <slot name="title"></slot> </div> <div class="list-content"> <slot name="content"></slot> </div> </div> </template> <script> export default { name: "MyList" } </script>
在父組件中使用MyList
<template> <MyList> <span slot="title">title</span> <ul slot="content"> <li v-for="item in listData">{{item}}</li> </ul> </MyList> </template> <script> import myList from './List.vue'; export default { name: 'HelloWorld', components: { 'MyList': myList }, data() { return { listData: [ '列表項(xiàng)1', '列表項(xiàng)2', '列表項(xiàng)3' ] } } } </script>
省略了其中的樣式代碼,結(jié)果如圖所示
滿足了基本的需求,但是作為組件的使用者,這樣的一個(gè)組件會(huì)讓我覺(jué)得非常麻煩,content中循環(huán)的邏輯還需要我自己動(dòng)手來(lái)寫(xiě),這樣的使用毫無(wú)便利性。于是有了下面第二個(gè)版本
使用prop來(lái)傳遞數(shù)據(jù)
因?yàn)榭紤]到列表的內(nèi)容總是一個(gè)數(shù)組,我把循環(huán)結(jié)構(gòu)寫(xiě)進(jìn)了組件中
列表組件第二版:
<template> <div class="list"> <div class="list-title">{{title}}</div> <ul class="list-content"> <li v-for="(item ,index) in content" :key="index">{{item}}</li> </ul> </div> </template> <script> export default { name: "MyList", props: { title: { type: String, required: true }, content: { type: Array, required: true } } } </script>
使用起來(lái)也非常方便,只需通過(guò)prop將數(shù)據(jù)傳入組件中
<template> <div> <MyList title="標(biāo)題1" :content="listData"></MyList> <MyList title="標(biāo)題2" :content="newListData"></MyList> </div> </template> <script> import myList from './List.vue'; export default { name: 'HelloWorld', components: { 'MyList': myList }, data() { return { listData: [ '列表項(xiàng)1', '列表項(xiàng)2', '列表項(xiàng)3' ], newListData: [ '新的列表項(xiàng)1', '新的列表項(xiàng)2', '新的列表項(xiàng)3' ], } } } </script>
改進(jìn)之后,每當(dāng)我使用組件只需一行代碼,大大簡(jiǎn)化了工作量
易用性的需求也滿足了,但現(xiàn)在又有了新的問(wèn)題,組件的拓展性不好!每次只能生成相同結(jié)構(gòu)的列表,一旦業(yè)務(wù)需求發(fā)生了變化,組件就不再適用了。比如我現(xiàn)在有了新的需求,在一個(gè)列表的每個(gè)列表項(xiàng)前加入了一個(gè)小logo,我總不可能又寫(xiě)一個(gè)新的組件來(lái)適應(yīng)需求的變化吧?假如需要更多的定制化場(chǎng)景呢?
作用域插槽
這里就有了第三版的列表組件,使用作用域插槽將子組件中的數(shù)據(jù)傳遞出去
<template> <div class="list"> <div class="list-title">{{title}}</div> <ul class="list-content"> <li v-for="(item ,index) in content" :key="index"> <!--這里將content中的每一項(xiàng)數(shù)據(jù)綁定到slot的item變量上,在父組件中可以獲取到item變量--> <slot :item="item">{{item}}</slot> </li> </ul> </div> </template>
使用組件時(shí),將業(yè)務(wù)所需的content模板傳入
<template> <div> <MyList title="標(biāo)題1" :content="listData1"></MyList> <MyList title="標(biāo)題2" :content="listData2"> <template slot-scope="scope"> <img :src="scope.item.img" width="20"> <span>{{scope.item.text}}</span> </template> </MyList> <MyList title="標(biāo)題3" :content="listData3"> <template slot-scope="scope"> <b>{{scope.item.prefix ? '有前綴' : '無(wú)前綴'}}</b> <span>{{scope.item.text}}</span> <span>{{scope.item.remark}}</span> </template> </MyList> </div> </template> <script> import myList from './List.vue'; export default { name: 'HelloWorld', components: { 'MyList': myList }, data() { return { listData1: [ '列表項(xiàng)1', '列表項(xiàng)2', '列表項(xiàng)3' ], listData2: [ {text: '第二個(gè)列表的列表項(xiàng)1', img: 'example.png'}, {text: '第二個(gè)列表的列表項(xiàng)2', img: 'example.png'}, {text: '第二個(gè)列表的列表項(xiàng)3', img: 'example.png'} ], listData3: [ {text: '第三個(gè)列表的列表項(xiàng)1', prefix: true, remark: '附加的備注1'}, {text: '第三個(gè)列表的列表項(xiàng)2', prefix: false, remark: '附加的備注2'}, {text: '第三個(gè)列表的列表項(xiàng)3', prefix: true, remark: '附加的備注3'} ], } } } </script>
實(shí)現(xiàn)了定制化的列表
再回到開(kāi)始的問(wèn)題,作用域插槽到底是干嘛用的?很顯然,它的作用就如官網(wǎng)所說(shuō)的一樣:將組件的數(shù)據(jù)暴露出去。而這么做,給了組件的使用者根據(jù)數(shù)據(jù)定制模板的機(jī)會(huì),組件不再是寫(xiě)死成一種特定的結(jié)構(gòu)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue配置文件自動(dòng)生成路由和菜單實(shí)例代碼
因?yàn)椴煌挠脩粲胁煌臋?quán)限,能訪問(wèn)的頁(yè)面是不一樣的,所以我們?cè)趯?xiě)后臺(tái)管理系統(tǒng)時(shí)就會(huì)遇過(guò)這樣的需求:根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單,這篇文章主要給大家介紹了關(guān)于vue配置文件自動(dòng)生成路由和菜單的相關(guān)資料,需要的朋友可以參考下2021-08-08vue DatePicker日期選擇器時(shí)差8小時(shí)問(wèn)題
這篇文章主要介紹了vue DatePicker日期選擇器時(shí)差8小時(shí)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue兩個(gè)同級(jí)組件傳值實(shí)現(xiàn)
Vue組件之間是有聯(lián)系的,避免不了組件之間要互相傳值,那么如何實(shí)現(xiàn)Vue兩個(gè)同級(jí)組件傳值,本文就來(lái)介紹一下,感興趣的可以了解一下2021-07-07vue element后臺(tái)鑒權(quán)流程分析
這篇文章主要介紹了vue element后臺(tái)鑒權(quán)流程分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05