插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。
简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；
作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。
注意:在 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>