Vue中slot-scope的深入理解（適合初學(xué)者）
百度上已經(jīng)有很多的關(guān)于slot-scope的文章，但我感覺(jué)都是那些以前沒(méi)學(xué)好，又回頭學(xué)的人，他們都使用了.Vue文件，我覺(jué)得有點(diǎn)不適合初學(xué)者，所以我就寫一篇適合初學(xué)者的。
先拋例程：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>組件之通過(guò)插槽(slot)分發(fā)內(nèi)容</title> <script src='http://www.cgvv.com.cn/bcjs/你的vue地址，請(qǐng)下載最新版的'></script> <script>Vue.component('test-slot',{ // 插槽允許有默認(rèn)內(nèi)容 template: `<div> <strong>Error!</strong> <slot></slot></div> `, data:function () {return { name:'perry'} }}); // 具名插槽Vue.component('slot-name',{ template: `<div> <header> <slot name='header'></slot> </header> <main><slot ></slot> </main> <footer><slot name='footer'></slot> </footer> </div> `}); // 作用域插槽Vue.component('todo-list',{ inheritAttrs:false, props:{todos:[Array,Object] }, template: `<ul><li v-for='todo in todos' :key='todo.id' > <slot :data='todo'>{{todo.text}}</slot></li> </ul> `}); </script><style>li{ list-style: none; display: inline-block; font-size: 25px;} </style></head><body> <div id='app'><!--1、插槽內(nèi)容 slot可以接收任何內(nèi)容、代碼，包括組件--><test-slot>Something bad happened.你是誰(shuí)啊，我認(rèn)識(shí)你嗎</test-slot><test-slot> Something bad happened. <!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是'岔道口'--> <h3>標(biāo)題{{name}}</h3> <img src='http://www.cgvv.com.cn/bcjs/img/flower.jfif' alt='圖片無(wú)法顯示'></test-slot><!--2、具名插槽 slo有一個(gè)特殊的屬性name,可以使插槽具名--><slot-name> <h3>勸學(xué)</h3> <p>少壯不努力，老大徒傷悲</p> <p>光陰似箭，日月如梭</p> <template slot='header'><ul > <li>主頁(yè)</li> <li>關(guān)于時(shí)間</li> <li>關(guān)于人生</li> <li>關(guān)于未來(lái)</li></ul> </template> <p>你好啊</p> <p slot='footer'><p>結(jié)尾</p><p>粵ICP備6545646456415</p> </p></slot-name><!--使用作用域插槽，通過(guò)slot-scope實(shí)現(xiàn)--><todo-list :todos='todos'> <template slot-scope='slotProps'><span v-if='slotProps.data.isTrue'>√</span>{{slotProps.data.text}} </template></todo-list><!--使用ES2015結(jié)構(gòu)語(yǔ)法--><todo-list :todos='todos'> <template slot-scope='{data}'><span v-if='data.isTrue'>√</span>{{data.text}} </template></todo-list> </div> <script>new Vue({ el:'#app', data:{name:'岔道口',todos:[ {text:'A',id:1,isTrue:true}, {text:'B',id:2,isTrue:true}, {text:'C',id:3,isTrue:false}, {text:'D',id:4,isTrue:true},],// slotProps:'' }}) </script></body></html>
例程中也寫了普通插槽和具名插槽，這個(gè)我就不說(shuō)，我就說(shuō)一下作用域插槽。首先從“作用域插槽“”這個(gè)名字說(shuō)起，本來(lái)你父組件的模板是無(wú)法使用到子組件模板中的數(shù)據(jù)，官網(wǎng)中有一句特別強(qiáng)調(diào)的話：父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。這句話其實(shí)挺難理解，舉個(gè)例子就知道了，
<test-slot> Something bad happened. <!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是'岔道口'--> <h3>標(biāo)題{{name}}</h3> <img src='http://www.cgvv.com.cn/bcjs/img/flower.jfif' alt='圖片無(wú)法顯示'></test-slot>
這是我上面的例子，也就是說(shuō)這里name必須是當(dāng)前組件里的，不能是test-slot這個(gè)組件內(nèi)部的數(shù)據(jù)，這是它作用域限制，name這個(gè)數(shù)據(jù)屬于父組件的作用域，所以只能是父組件的數(shù)據(jù)。但是slot-scope的出現(xiàn)卻實(shí)現(xiàn)了父組件調(diào)用子組件內(nèi)部的數(shù)據(jù)，子組件的數(shù)據(jù)通過(guò)slot-scope屬性傳遞到了父組件
// 作用域插槽 Vue.component('todo-list',{inheritAttrs:false,props:{ todos:[Array,Object]},template:`<ul> <li v-for='todo in todos' :key='todo.id' > //這里的：data=“todo”就是講子組件todo這個(gè)數(shù)據(jù)傳給了父組件<slot :data='todo'>{{todo.text}}</slot>//todo.text是默認(rèn)值，父組件會(huì)把它覆蓋掉 </li> </ul>` });
<!--使用作用域插槽，通過(guò)slot-scope實(shí)現(xiàn)--><todo-list :todos='todos'> <template slot-scope='slotProps'><span v-if='slotProps.data.isTrue'>√</span>{{slotProps.data.text}} </template></todo-list>
使用的時(shí)候就是這樣，從子組件傳過(guò)來(lái)的名為data值為todo的數(shù)據(jù)將會(huì)被slot-scope接收，需要注意的是，slot-scope接收的是一個(gè)對(duì)象，這里命名為slotProps，也就是說(shuō)你傳過(guò)來(lái)的data將會(huì)作為slotProps的一個(gè)屬性，所以需要slotProps.data才能調(diào)用到data。前面說(shuō)了，data的值為todo，todo是什么呢？todo是todos遍歷出來(lái)的，所以是一個(gè)對(duì)象。
new Vue({ el:'#app', data:{name:'岔道口',todos:[ {text:'A',id:1,isTrue:true}, {text:'B',id:2,isTrue:true}, {text:'C',id:3,isTrue:false}, {text:'D',id:4,isTrue:true},],// slotProps:'' }})；
我們已經(jīng)理解了slot-scope特性，那么他有什么運(yùn)用場(chǎng)景呢？我們可以試想一下，別人寫好了一個(gè)組件，該組件已經(jīng)封裝好了，但他覺(jué)得，數(shù)據(jù)的顯示風(fēng)格讓用戶自己定義，就像我們上面，我們希望列表的樣式由用戶定義，比如我就加了一個(gè)√號(hào)。一開始最初的數(shù)據(jù)是我們傳進(jìn)去的，但數(shù)據(jù)必須進(jìn)過(guò)子組件處理后，寫組件那個(gè)人肯定希望顯示的是處理后的數(shù)據(jù)。這時(shí)候slot-scope就無(wú)比重要了。
總結(jié)
到此這篇關(guān)于Vue中slot-scope深入理解的文章就介紹到這了,更多相關(guān)Vue slot-scope理解內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 用xslt+css讓RSS顯示的跟網(wǎng)頁(yè)一樣漂亮2. ASP.NET MVC把數(shù)據(jù)庫(kù)中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字3. 《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)（一)4. Ajax實(shí)現(xiàn)異步加載數(shù)據(jù)5. 測(cè)試模式 - XSL教程 - 56. ASP.NET Core自定義中間件的方式詳解7. html5手機(jī)觸屏touch事件介紹8. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效9. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例10. 教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)
網(wǎng)公網(wǎng)安備