vue 插槽scope_vue2 作用域插槽slot-scope详解

插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。

简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；

作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。

注意:在 2.5.0+，slot-scope 不再限制在  元素上使用，而可以用在插槽内的任何元素或组件上。

1.App.vue

slot="slotName"

slot-scope="scopeName">

{ {scopeName.dos}}

{ {item.do}}

import child from "./components/child.vue"

export default{

components:{child},

data(){

return{

items:[

{do:'play'},

{do:'eat'},

{do:'sleep'},

{do:'play'},

{do:'eat'},

{do:'sleep'}

]

}

}

}

2.child.vue

v-fo