在使用组件时，在引用的组件标签中添加内容时，会自动被组件中的模板代替，如【例1】

【例1】

<my-comp>Have a happy Life</my-comp>

Vue.component('my-comp',{
    template:`
        <div> Life is a shit! </div>
    `
})

【结果】

1.插槽的使用

当不想要传递给组件的内容被替代，则可以使用组件插槽来解决这个问题，具体使用方法是，在组件模板中添加 <slot> 标签，当组件渲染时，<slot></slot> 将会被替换为“写在组件标签结构中的内容”，如【例2】

【例2】

Vue.component('my-comp',{
    template:`
        <div> Life is a shit! 
            <slot></slot>    
        </div>
    `
})

【结果】

 【注】

1. 插槽内可以包含任何模板代码，包括 HTML 和其他组件
2. 如果组件没有包含 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

2.编译作用域

因为父级模板里的所有内容都是在父级作用域中编译的，子模版里的所有内容都是在子作用域中编译的，所以插槽不能访问其所在组件的作用域，而是模板的作用域，如【例3】

【例3】

<my-comp>Hi {{ userName }}, Have a happy Life!</my-comp>

//组件
Vue.component('my-comp',{
    template:`
        <div>
            <slot></slot>    
        </div>
    `,
    data(){
        return {
            userName: 'Jony'
        }
    }
})
//vue实例
const vm = new Vue({
    el:'#app',
    data:{
        userName:'Jim'
    }
})

【结果】

3.默认插槽

默认插槽即，若在组件引用时，没有像其传递内容，则使用默认插槽的内容（也称为后备内容）；若在引用时，传递了内容，则渲染传递的内容，如【例4】

【例4】

组件

Vue.component('my-button',{
    template:`
        <button type="submit">
            <slot>Submit</slot>    
        </button>
    `
})

未传递内容

<my-button></my-button>

【结果】

传递内容

<my-button>Hit me</my-button>

【结果】

4.具名插槽

（1）具名插槽使用

若在一个组件中需要使用多个插槽，则要使用具名插槽来区分，其使用方式为：在组件中的 <slot> 元素上使用一个特殊的特性 name，利用这个特性可以定义额外的插槽；在引用组件时，需要在 <template>  元素上使用 v-slot 指令，v-slot 的参数即是特性 name，如【例5】

【注】一个不带name的 <slot> 会带有隐含的名字“default”。

【例5】

//组件
Vue.component('my-cmp',{
    template:`
        <div class="container">
            <header>
                <slot name='header'></slot>
            </header>
            <main>
                <slot name='main'></slot>
            </main>
            <footer>
                <slot name='footer'></slot>
            </footer>
            <slot></slot>
        </div>
    `
})

<!-- 组件引用 -->
<my-cmp>
    <template v-slot:header>
        <div>header</div>
    </template>
    <template v-slot:main>
        <div>main</div>
    </template>
    <template v-slot:footer>
        <div>footer</div>
    </template>
    <template v-slot:default>
        <div>default</div>
    </template>
</my-cmp>

 【结果】

【注】v-slot 只能添加在 <template> 上，只有一种情况特殊（介绍如下）

（2）具名插槽的缩写

<my-cmp>
    <template #header>
        header
    </template>
    <template #default>
        default
    </template> 
    <template #main>
        main
    </template> 
    <template #footer>
        footer
    </template>  
</my-cmp>

【注】该缩写只有在其有参数时可以使用 

 5.作用域插槽

为了能够让插槽内容访问子组件的数据，可以将子组件的数据作为绑定在 <slot> 元素的一个特性（插槽 prop），则在父级作用域中，可以给v-slot带一个值来定义所提供的插槽 prop 名字，如【例6】

【例6】

//组件
Vue.component('my-comp1',{
    data(){
        return {
            user:{
                name:'桃花扇J',
                age:18
            }
        }
    },
    template:`
        <div>
            <slot v-bind:user="user"></slot>    
        </div>
    `
})

<my-comp1>
    <template v-slot:default="slotProps">
        {{ slotProps.user.name }}
    </template>
</my-comp1>

 【结果】

（1）独占默认插槽的缩写语法

当被提供的内容只有默认插槽时，组件的标签可以被当作插槽的模板来使用，此时，可以将 v-slot 直接用在组件上，且可以缩写为以下形式：

<my-comp1 v-slot="slotProps">
    {{ slotProps.user.name }}
</my-comp1>

【注】默认插槽的缩写语法不能和具名插槽混用，会导致作用域不明确，即只要出现多个插槽，就需要为所有的插槽使用完整的基于 <template> 的语法

（2）解构插槽 Prop

使用结构传入具体的插槽prop会使模板更简洁

<my-comp1 v-slot="{ user }">
    {{ user.name }}
</my-comp1>

根据解构的语法，还可以给 prop 重命名

<my-comp1 v-slot="{ user:person }">
    {{ person.name }}
</my-comp1>