Vue中slot-scope的深入理解（適合初學(xué)者）
百度上已經(jīng)有很多的關(guān)于slot-scope的文章，但我感覺都是那些以前沒學(xué)好，又回頭學(xué)的人，他們都使用了.Vue文件，我覺得有點(diǎn)不適合初學(xué)者，所以我就寫一篇適合初學(xué)者的。
先拋例程：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>組件之通過插槽(slot)分發(fā)內(nèi)容</title> <script src='http://www.gepszalag.com/bcjs/你的vue地址，請下載最新版的'></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.你是誰啊，我認(rèn)識(shí)你嗎</test-slot><test-slot> Something bad happened. <!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是'岔道口'--> <h3>標(biāo)題{{name}}</h3> <img src='http://www.gepszalag.com/bcjs/img/flower.jfif' alt='圖片無法顯示'></test-slot><!--2、具名插槽 slo有一個(gè)特殊的屬性name,可以使插槽具名--><slot-name> <h3>勸學(xué)</h3> <p>少壯不努力，老大徒傷悲</p> <p>光陰似箭，日月如梭</p> <template slot='header'><ul > <li>主頁</li> <li>關(guān)于時(shí)間</li> <li>關(guān)于人生</li> <li>關(guān)于未來</li></ul> </template> <p>你好啊</p> <p slot='footer'><p>結(jié)尾</p><p>粵ICP備6545646456415</p> </p></slot-name><!--使用作用域插槽，通過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)語法--><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è)我就不說，我就說一下作用域插槽。首先從“作用域插槽“”這個(gè)名字說起，本來你父組件的模板是無法使用到子組件模板中的數(shù)據(jù)，官網(wǎng)中有一句特別強(qiáng)調(diào)的話：父組件模板的所有東西都會(huì)在父級作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級作用域內(nèi)編譯。這句話其實(shí)挺難理解，舉個(gè)例子就知道了，
<test-slot> Something bad happened. <!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是'岔道口'--> <h3>標(biāo)題{{name}}</h3> <img src='http://www.gepszalag.com/bcjs/img/flower.jfif' alt='圖片無法顯示'></test-slot>
這是我上面的例子，也就是說這里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ù)通過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>` });
<!--使用作用域插槽，通過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í)候就是這樣，從子組件傳過來的名為data值為todo的數(shù)據(jù)將會(huì)被slot-scope接收，需要注意的是，slot-scope接收的是一個(gè)對象，這里命名為slotProps，也就是說你傳過來的data將會(huì)作為slotProps的一個(gè)屬性，所以需要slotProps.data才能調(diào)用到data。前面說了，data的值為todo，todo是什么呢？todo是todos遍歷出來的，所以是一個(gè)對象。
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)用場景呢？我們可以試想一下，別人寫好了一個(gè)組件，該組件已經(jīng)封裝好了，但他覺得，數(shù)據(jù)的顯示風(fēng)格讓用戶自己定義，就像我們上面，我們希望列表的樣式由用戶定義，比如我就加了一個(gè)√號(hào)。一開始最初的數(shù)據(jù)是我們傳進(jìn)去的，但數(shù)據(jù)必須進(jìn)過子組件處理后，寫組件那個(gè)人肯定希望顯示的是處理后的數(shù)據(jù)。這時(shí)候slot-scope就無比重要了。
總結(jié)
到此這篇關(guān)于Vue中slot-scope深入理解的文章就介紹到這了,更多相關(guān)Vue slot-scope理解內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 使用EF Code First搭建簡易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫遷移2. HTML <!DOCTYPE> 標(biāo)簽3. HTML5 Canvas繪制圖形從入門到精通4. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案5. vue父子組件傳值不能實(shí)時(shí)更新的解決方法6. Matplotlib可視化之添加讓統(tǒng)計(jì)圖變得簡單易懂的注釋7. PHP結(jié)構(gòu)型模式之代理模式8. python中數(shù)據(jù)庫like模糊查詢方式9. php中Workerman框架實(shí)例講解10. PHP下載采集圖片到本地的方法詳解【可忽略ssl認(rèn)證】
網(wǎng)公網(wǎng)安備