1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

    默认插槽

    1. 父组件中：
    2.      <Category>
    3.         <div>html结构1</div>
    4.      </Category>
    5. 子组件中：
    6.      <template>
    7.          <div>
    8.             <!-- 定义插槽 -->
    9.             <slot>插槽默认内容...</slot>
    10.          </div>
    11.      </template>

    具名插槽

    1. 父组件中：
    2.      <Category>
    3.            <!-- 默认插槽为default -->
    4.          <div slot="default">插入匿名插槽内容</div>
    6.            <!-- 方式一: slot="" -->
    7.          <template slot="center">
    8.            <div>html结构1</div>
    9.          </template>
    11.                      <!-- 方式二: v-slot: 推荐 因为vue3.x在用
    12.          在vue3中 v-slot:可以简写为# <template #footer>-->
    13.          <template v-slot:footer>
    14.             <div>html结构2</div>
    15.          </template>
    16.      </Category>
    17. 子组件中：
    18.      <template>
    19.          <div>
    20.             <!-- 定义插槽 -->
    21.             <slot>默认插槽内容...</slot>
    22.             <slot name="center">插槽默认内容...</slot>
    23.             <slot name="footer">插槽默认内容...</slot>
    24.          </div>
    25.      </template>

    作用域插槽

    应用场景: 数据在组件的自身(子组件)，但根据数据生成的结构需要组件的使用者(父组件)来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
    写法 : v-slot:scope="scopeData" -> v-slot:插槽名="自定义集合名" ```vue 父组件中：

    1.  <Category>
    2.      <template scope="scopeData">
    3.          <!-- 生成的是ul列表 -->
    4.          <ul>
    5.              <li v-for="g in scopeData.games" :key="g">{{g}}</li>
    6.          </ul>
    7.      </template>
    8.  </Category>
    10.  <Category>
         <template slot-scope="scopeData">
         <!-- 生成的是h4标题 -->
         <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
     </template>
 </Category>

子组件中： 

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>

<a name="nyuOR"></a>
## 插槽项目实例
> 共用插槽模板 - Header.vue

```vue
<template>
  <!--公用函数给模板-->
  <div class="header" @click="changeThemes">
    <!--注意点: 不能直接插槽设置样式-->
    <div class="left">
      <slot name="left">左边</slot>
    </div>
    <slot name="center">中间</slot>
    <div class="right">
      <slot name="right">右边</slot>
    </div>
  </div>
</template>

<script>
export default {
  name:"Header",
  methods:{
    changeThemes(){
    }
  }
}
</script>

<style scoped lang="scss">
  //公用样式
.header{
  .left, .right{
    *{
    }
  }
}

</style>

使用插槽的模板 - xx.vue

<template>
  <Header class="header">
    <div slot="left" class="header-left"></div>
    <p slot="center" class="header-title">网抑云音乐</p>
    <!--个人函数/样式 自己配置-->
    <div slot="right" class="header-right" @click.stop="accountClick"></div>
  </Header>
</template>

<script>
import Header from './Header.vue'
export default {
  name:"MainHeader",
  components:{
    Header
  },
  methods:{
    //个人函数自己配置
    accountClick(){
      this.$router.push('/account')
    }
  }
}
</script>

<style scoped lang="scss">
  .header{
    .header-left{
    }
    .header-right{
    }
    .header-title{
    }
  }

</style>