插槽分為單個插槽，具名插槽，還有作用域插槽，前兩種比較簡單這里就不贅述了，今天的重點是討論作用域插槽。
簡單來說，前兩種插槽的內容和樣式皆由父組件決定，也就是說顯示什么內容和怎樣顯示都由父組件決定；
作用域插槽的樣式由父組件決定，內容卻由子組件控制。簡單來說：前兩種插槽不能綁定數據，作用域插槽是一個帶綁定數據的插槽。
注意:在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內的任何元素或組件上。
1.App.vue
1 <template> 2 <div> 3 <child :propName="items"> <!--傳值到子組件--> 4 <!--寫法1 --> 5 <li 6 <!--作用域插槽也可以具名 綁定slot name="slotName"--> 7 slot="slotName" 8 <!--把子組件插槽看作一個對象, 賦給scopeName--> 9 slot-scope="scopeName"> 10 <!-- dos="item.do" (子組件中)--> 11 {{scopeName.dos}} 12 </li> 13 </child> 14 15 <!--寫法2 es6 的解構寫法 推薦!!!--> 16 <child :propName="items"> 17 <li slot="slotName" slot-scope="{item}"> 18 {{item.do}} 19 </li> 20 </child>
21 </div> 22 </template> 23 <script> 24 import child from "./components/child.vue" 25 export default{ 26 components:{child}, 27 data(){ 28 return{ 29 items:[ 30 {do:'play'}, 31 {do:'eat'}, 32 {do:'sleep'}, 33 {do:'play'}, 34 {do:'eat'}, 35 {do:'sleep'} 36 ] 37 } 38 } 39 } 40 </script>
2.child.vue
1 <template> 2 <ul> 3 <slot name="slotName" <!--作用域插槽也可以具名!--> 4 v-for="item in items" 5 :dos="item.do" <!--取循環中的項作為屬性 方便父組件調用!--> 6 ></slot> 7 </ul> 8 </template> 9 <script> 10 export default{ 11 props:['items'] <!--父級items 傳過來的值!--> 12 } 13 </script>