匿名插槽，具名插槽，作用域插槽

Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope

Slot1.vue

<template>
    <div>
        <slot>后备内容</slot>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

 

Slot2.vue

<template>
    <div>
        <h3>
            <slot></slot>
        </h3>
        <slot name="content"></slot>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

 

Slot3.vue

<template>
    <div>
        <h3>
            作用域插槽
        </h3>
        <!-- 通过绑定指定作用域 -->
        <slot :foo="foo"></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                foo: 'bar'
            }
        },
    }
</script>

<style scoped>

</style>

 

Index.vue

<template>
    <div>
        <Comp1>匿名插槽</Comp1>
        <Comp2>
            <!-- 默认插槽用default -->
            <template v-slot:default>具名插槽</template>
            <!-- v-slot:插槽名 -->
            <template v-slot:content>内容...</template>
        </Comp2>
        <Comp3>
            <!-- v-slot:插槽名="作用域上下文" -->
            <template v-slot:default="ctx">
                来自子组件数据：{{ctx.foo}}
            </template>
        </Comp3>
    </div>
</template>

<script>
    import Comp1 from './Comp1.vue'
    import Comp2 from './Comp2.vue'
    import Comp3 from './Comp3.vue'
    
    export default {
        components: {
            Comp1, Comp2, Comp3
        },
    }
</script>

<style scoped>

</style>