插槽：让父组件可以向子组件的指定位置插入HTML结构

父组件 ===> 子组件

默认插槽

在组件标签中写入普通标签

<Category title="美食" :listData="foods">
  <img src="https://img0.baidu.com/it/u=2038377207,4244562443&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="烧烤">
</Category>

在组件模板中写插槽

<slot></slot>

插槽还可以传递默认值，当组件标签中没有传递过来数据时，就会显示默认值

具名插槽

可以给插槽指定名称

插槽命名

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot name="demo1"></slot>
        <slot name="demo2"></slot>
    </div>
</template>

使用插槽

<img slot="demo1"
  src="https://img0.baidu.com/it/u=2038377207,4244562443&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"
  alt="烧烤"
/>
<a slot="demo2" href="https://www.baidu.com">百度</a>

如果使用的了template标签，在写solt时就可以采用新写法

<template v-slot:demo2>
  <div class="foot">
    <a href="#">经典</a>
    <a href="#">热门</a>
    <a href="#">推荐</a>
  </div>
</template>

作用域插槽

能让插槽把数据反着传递给需要使用插槽的人。

可以传递多个值。

插槽给使用者传递数据

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :foods="foods">我是默认的内容！</slot>
  </div>
</template>

使用者接收数据

第一种写法：

<Category title="美食">
  <template scope="value">
    <ul>
      <li v-for="(f,index) in value.foods" :key="index">{{f}}</li>
    </ul>
  </template>
</Category>

第二种写法：

<Category title="美食">
  <ul slot-scope="value">
    <li v-for="(f,index) in value.foods" :key="index">{{f}}</li>
  </ul>
</Category>