6.插槽：(作用是子组件中提供给父组件的一个占位符)

1.具名插槽（固定格式）

//父组件
<template>
    <div>
        <zi-jian>
            <h1>父组件：h1</h1>
            <h1 slot="title">父组件插槽：h1</h1>
        </zi-jian>
    </div>
</template>
<script>
    import ZiJian from "./ZiJian"
    export default {
        components:{ZiJian}
    }
</script>
//子组件
<template>
    <div>
        <h1>子组件：h1</h1>
        <h2>子组件：h2</h2>
        <h3>子组件：h3</h3>
        <slot name="title"></slot> //显示父组件中slot="title"的部分
        <slot></slot> //显示父组件中没有slot的部分
    </div>
</template>

 

 

2.作用域插槽（方便组件数据以不同格式渲染）

//父组件
<template>
    <div>
        <zi-jian>
            <template slot-scope="data1">
                <h1>{{data1.age}}</h1>
                <h2>{{data1.sex}}</h2>
            </template>
        </zi-jian>
    </div>
</template>
<script>
    import ZiJian from "./ZiJian"
    export default {
        components:{ZiJian}
    }
</script>
//子组件
<template>
    <div>
        <slot :age="msg"></slot>
        <slot :sex="msg2"></slot>
    </div>
</template>
<script>
    export default {
        data(){
            msg:'年龄',
            msg2:'性别'
        }
    }
</script>