vue学习（5）vue高阶slot插槽使用

1、v-slot，slot-scope和slot

vue2.6更新后推出v-slot 来代替之前 的 slot-scope和slot使用

子组件：child.vue

<template>
    <div>
        <h2>这是子组件</h2>
        <slot></slot>
        <slot name="footer" :list="list"></slot>
    </div>
</template>
<script>
export default{
    data() {
        return{
            list: [1, 2, 3]
        }
    }
}
</script>

父组件:

老版使用方式：slot-scope和slot 的具名插槽作用域

<template>
    <child>
        <template slot="footer" slot-scope="scope">
            <li v-for="item in scope.list" :key="item">
                {{ item }}
            </li>
        </template>
    </child>
</template>

新版使用方式：v-slot的具名插槽作用域

<template>
    <child>
        <template v-slot:footer="scope">
            <li v-for="item in scope.list" :key="item">
                {{ item }}
            </li>
        </template>
    </child>
</template>

其实大家都会发现，子组件其实是没有变化的，区别在于父组件修改了写法，v-slot集成了 slot和slot-scope，简化了写法，另外 v-slot 还可以动态具名

2、v-slot  动态具名

<template>
    <child>
        <template v-slot:[adyncName]>
            <li v-for="item in scope.list" :key="item">
                {{ item }}
            </li>
        </template>
    </child>
</template>
<script>
export default{
    data() {
        return{
            adyncName: 'footer'
        }
    }
}
</script>

3、v-slot 具名新写法 '#'

<template>
    <child>
        <template #footer></template>
    </child>
</template>

4、爷孙插槽组件调用(高阶用法)

孙组件 grandSon.vue

<template>
    <div>
        <h2>这是孙组件</h2>
        <slot></slot>
        <slot name="grandSonSlot" :grandSonMethod="grandSonMethod"></slot>
    </div>
</template>
<script>
export default{
    data() {
        return{
            list: [1, 2, 3]
        }
    },
    methods: {
        grandSonMethod() {
            return this.list
        }
    }
}
</script>

子组件 son.vue

<template>
    <div>
        <h2>这是子组件</h2>
        <grandSon>
            <template v-slot:grandSonSlot="props">
                <slot name="sonSlot" v-bind="props" />
            </template>
        </grandSon>
    </div>
</template>

爷组件 grandFather.vue

<template>
    <div>
        <h2>这是爷组件</h2>
        <son>
            <template v-slot:sonSlot={ grandSonMethod }>
                <li v-for="item in grandSonMethod" :key="item">
                    {{ item }}
                </li>
            </template>
        </son>
    </div>
</template>