三十七、slot插槽

（一）作用

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

（二）分类

• 默认插槽
• 具名插槽
• 作用域插槽

（三）使用方式

1.默认插槽

1）父组件

<Category>
  <div>html结构1</div>
</Category>

2）子组件

<template>
  <div>
    <!-- 定义插槽 -->
    <slot>插槽默认内容...</slot>
  </div>
</template>

2.具名插槽

1）父组件

<Category>
  <template slot="center">
    <div>html结构1</div>
  </template>
  <template v-slot="footer">
    <div>html结构2</div>
  </template>
</Category>

2）子组件

<template>
  <div>
    <!-- 定义插槽 -->
    <slot name="center">插槽默认内容...</slot>
    <slot name="footer">插槽默认内容...</slot>
  </div>
</template>

3.作用域插槽

• 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定
• 如：games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定

1）父组件

<Category>
  <template scope="scopeData">
    <!-- 生成的是ul列表 -->
    <ul>
      <li v-for="g in scopeData.games" :key="g">{{g}}</li>
    </ul>
  </template>
  <template scope="scopeData">
    <!-- 生成的是h4标题 -->
    <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
  </template>
</Category>

2）子组件

<template>
  <div>
    <slot :games="games">插槽默认内容...</slot>
  </div>
</template>

3）数据

export default {
  name: 'Category',
  props: ['title'],
  // 数据在组件自身
  data: {
    return {
      games: ["红色警戒", "穿越火线", "王者荣耀", "英雄联盟"],
    }
  }
}