Vue中slot-scope的深入理解（適合初學者）
百度上已經有很多的關于slot-scope的文章，但我感覺都是那些以前沒學好，又回頭學的人，他們都使用了.Vue文件，我覺得有點不適合初學者，所以我就寫一篇適合初學者的。
先拋例程：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>組件之通過插槽(slot)分發內容</title> <script src='http://www.aoyou183.cn/bcjs/你的vue地址，請下載最新版的'></script> <script>Vue.component('test-slot',{ // 插槽允許有默認內容 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、插槽內容 slot可以接收任何內容、代碼，包括組件--><test-slot>Something bad happened.你是誰啊，我認識你嗎</test-slot><test-slot> Something bad happened. <!--允許使用變量，但該變量必須是本作用域的才會生效，這里name的值將會是'岔道口'--> <h3>標題{{name}}</h3> <img src='http://www.aoyou183.cn/bcjs/img/flower.jfif' alt='圖片無法顯示'></test-slot><!--2、具名插槽 slo有一個特殊的屬性name,可以使插槽具名--><slot-name> <h3>勸學</h3> <p>少壯不努力，老大徒傷悲</p> <p>光陰似箭，日月如梭</p> <template slot='header'><ul > <li>主頁</li> <li>關于時間</li> <li>關于人生</li> <li>關于未來</li></ul> </template> <p>你好啊</p> <p slot='footer'><p>結尾</p><p>粵ICP備6545646456415</p> </p></slot-name><!--使用作用域插槽，通過slot-scope實現--><todo-list :todos='todos'> <template slot-scope='slotProps'><span v-if='slotProps.data.isTrue'>√</span>{{slotProps.data.text}} </template></todo-list><!--使用ES2015結構語法--><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>
例程中也寫了普通插槽和具名插槽，這個我就不說，我就說一下作用域插槽。首先從“作用域插槽“”這個名字說起，本來你父組件的模板是無法使用到子組件模板中的數據，官網中有一句特別強調的話：父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。這句話其實挺難理解，舉個例子就知道了，
<test-slot> Something bad happened. <!--允許使用變量，但該變量必須是本作用域的才會生效，這里name的值將會是'岔道口'--> <h3>標題{{name}}</h3> <img src='http://www.aoyou183.cn/bcjs/img/flower.jfif' alt='圖片無法顯示'></test-slot>
這是我上面的例子，也就是說這里name必須是當前組件里的，不能是test-slot這個組件內部的數據，這是它作用域限制，name這個數據屬于父組件的作用域，所以只能是父組件的數據。但是slot-scope的出現卻實現了父組件調用子組件內部的數據，子組件的數據通過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這個數據傳給了父組件<slot :data='todo'>{{todo.text}}</slot>//todo.text是默認值，父組件會把它覆蓋掉 </li> </ul>` });
<!--使用作用域插槽，通過slot-scope實現--><todo-list :todos='todos'> <template slot-scope='slotProps'><span v-if='slotProps.data.isTrue'>√</span>{{slotProps.data.text}} </template></todo-list>
使用的時候就是這樣，從子組件傳過來的名為data值為todo的數據將會被slot-scope接收，需要注意的是，slot-scope接收的是一個對象，這里命名為slotProps，也就是說你傳過來的data將會作為slotProps的一個屬性，所以需要slotProps.data才能調用到data。前面說了，data的值為todo，todo是什么呢？todo是todos遍歷出來的，所以是一個對象。
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:'' }})；
我們已經理解了slot-scope特性，那么他有什么運用場景呢？我們可以試想一下，別人寫好了一個組件，該組件已經封裝好了，但他覺得，數據的顯示風格讓用戶自己定義，就像我們上面，我們希望列表的樣式由用戶定義，比如我就加了一個√號。一開始最初的數據是我們傳進去的，但數據必須進過子組件處理后，寫組件那個人肯定希望顯示的是處理后的數據。這時候slot-scope就無比重要了。
總結
到此這篇關于Vue中slot-scope深入理解的文章就介紹到這了,更多相關Vue slot-scope理解內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備