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是一個空對象。