您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue作用域插槽怎么使用的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
簡(jiǎn)單的展示列表
現(xiàn)在我們做一個(gè)純展示用途的列表組件,如下圖所示:
第一個(gè)例子先用slot來分發(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>
滿足了基本的需求,但是作為組件的使用者,這樣的一個(gè)組件會(huì)讓我覺得非常麻煩,content中循環(huán)的邏輯還需要我自己動(dòng)手來寫,這樣的使用毫無便利性。于是有了下面第二個(gè)版本
使用prop來傳遞數(shù)據(jù)
因?yàn)榭紤]到列表的內(nèi)容總是一個(gè)數(shù)組,我把循環(huán)結(jié)構(gòu)寫進(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>
使用起來也非常方便,只需通過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)在又有了新的問題,組件的拓展性不好!每次只能生成相同結(jié)構(gòu)的列表,一旦業(yè)務(wù)需求發(fā)生了變化,組件就不再適用了。比如我現(xiàn)在有了新的需求,在一個(gè)列表的每個(gè)列表項(xiàng)前加入了一個(gè)小logo,我總不可能又寫一個(gè)新的組件來適應(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 ? '有前綴' : '無前綴'}}</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>
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
以上就是“Vue作用域插槽怎么使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。