vue vm.$scopedSlots和vm.$slots的理解和基本使用

父组件

<listItem :arr="list"></listItem>

 子组件

export default {
    name: 'list-item',
    props: {
        arr: {
            type: Array,
            default () {
                return []
            }
        }
    },
    render(h, vm) {
        return ( <ul>{
                this.arr.map(item => ( <
                    li > {
                        this.$slots.default || item.name
                    } --- {item.txt}< /li>
                ))
            } </ul>
        )
    }
}

视图：

父组件修改成以下

<listItem :arr="list">
    <span>{{list[0].name}} | vm.$slots的使用</span>
</listItem>

视图：

 说明传过去了值，但是不能循环取值 所以需要用到   vm.$scopedSlots 做以下修改

父组件：

<listItem :arr="list">
    <span slot-scope="scope">{{scope.name}} | vm.$slots的使用</span>
</listItem>

子组件

export default {
    name: 'list-item',
    props: {
        arr: {
            type: Array,
            default () {
                return []
            }
        }
    },
    render(h, vm) {
        return ( <ul>{
                this.arr.map(item => ( 
                    <li> {this.$scopedSlots.default(item)} --- {item.txt}</li>
                ))
            } </ul>
        )
    }
}

视图：

 说明$scopedSlots 具有作用域

$scopedSlots有了default属性，而$slots则少了default属性。

这也说明了作用域插槽和普通插槽的区别是使用插槽时是否有slot-scope特性。

不过因为我们没有给default插槽绑定插槽prop，此时的scope是一个空对象。