🔵默认插槽

使用方式：在父组件中，在组件标签内添加html结构；在子组件中，在需要放置这个html结构的位置定义插槽。一个slot里面是可以放入多个html标签结构的。

代码示例：

//第一种情况，父组件内子组件标签没有html结构的情况
//子组件代码
<template>
  <div class="category">
      <h3>{{title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot>此处如果没有html结构，默认展示此文字</slot>
  </div>
</template>

//父组件代码
<template>
  <div class="container">   
    <Category title="美食"></Category>
  </div>
</template>



//第二种情况，父组件内子组件标签有html结构的情况
//子组件代码
<template>
  <div class="category">
      <h3>{{title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot>此处如果没有html结构，默认展示此文字</slot>
  </div>
</template>

//父组件代码
<template>
  <div class="container">   
    <Category title="美食">
      <img src="./assets/美食.jpg" alt="">
    </Category>
  </div>
</template>

效果展示：

?第一种情况效果：

第二种情况效果：

🔶具名插槽

使用方式：在默认插槽的基础上，给每个定义的插槽添加一个名字属性name，使用的时候需要在对应html标签内添加slot="名字属性值"。如果插槽有名字，html标签使用时不加上这个属性值不会报错，不会显示相应的内容；如果使用了template标签可以使用v-slot：属性值来绑定到对应插槽。

代码示例：

//情况一：
//子组件代码：
<template>
  <div class="category">
      <h3>{{title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot name="center">此处如果没有添加属性值center，默认展示此文字</slot>
      <slot name="footer">此处如果没有添加属性值footer，默认展示此文字</slot>
  </div>
</template>
//父组件代码：
<template>
  <div class="container">   
    <Category title="美食">
      <img src="./assets/美食.jpg" alt="">
      <h3>清补凉</h3>
      <ul>
        <li>健脾益气</li>
        <li>清热润肺</li>
      </ul>
    </Category>
  </div>
</template>



//情况二：
//子组件代码：
<template>
  <div class="category">
      <h3>{{title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot name="center">此处如果没有添加属性值center，默认展示此文字</slot>
      <slot name="footer">此处如果没有添加属性值footer，默认展示此文字</slot>
  </div>
</template>
//父组件代码：
<template>
  <div class="container">   
    <Category title="美食">
      <img slot="center" src="./assets/美食.jpg" alt="">
      <h4 slot="center">清补凉</h4>
    <div slot="footer">      
      <ul>
        <li>健脾益气</li>
        <li>清热润肺</li>
      </ul>
    </div>
    </Category>
  </div>
</template>


//情况三：
//使用template标签时
    <template v-slot:footer>      
      <ul>
        <li>健脾益气</li>
        <li>清热润肺</li>
      </ul>
    </template>

?效果展示：

?第一种情况效果：

??第二、三种情况效果：

🔺作用域插槽

当数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定的时候，需要使用到作用域插槽。

注意，组件的使用者在使用作用域插槽的时候需要在html结构外面包裹一个template标签，template标签添加一个scope属性，此时能获得一个对象，我们需要的是对象里面的数据，scope属性支持结构赋值，scope属性有两种写法，一种是scope="值"，另外一种是slot-scope="值"。

代码示例：

//子组件代码
<template>
  <div class="category">
      <h3>{{title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot :films="films">如果没有html结构，默认展示此段文字</slot>
  </div>
</template>

<script>
export default {
name:'Category',
props:['title'],
  data() {
    //   数据在组件自身
    return {
      films:['圆梦巨人','疯狂动物城','无间道','千与千寻']
    }
  },
}
</script>

<style>
.category{
    background-color:antiquewhite;
    width: 200px;
    height: 200px;
}
h3{
    text-align: center;
    background-color: orange;
}
</style>

//父组件代码
<template>
  <div class="container">   
    <Category title="电影">
     <template scope="films">
      <ul>
        <li style="color:green" v-for="(f,index) in films.films" :key="index">{{f}}</li>
      </ul>
     </template>
    </Category>
     <Category title="电影">
      <!-- 解构赋值写法 -->
     <template scope="{films}">
      <ol>
        <li style="color:purple" v-for="(f,index) in films" :key="index">{{f}}</li>
      </ol>
     </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category'
  export default {
    name: 'App',
    //组件的使用者
    components:{Category}
  }
</script>

<style lang="css">
.container{
  display: flex;
  justify-content: space-around;
}
</style>

效果展示：