Vue中v-slot、插槽详解（看完这篇插槽对你来说很简单）

不使用插槽

领导让小睡做一个小样式，那就用这个小案例作为引入，
看看在不使用插槽的时候、使用插槽时候的区别。下次就知道什么时候使用插槽能更方便了。

看到上面的样式，首先会想到使用组件，然后再App.vue中把标题和内容数据传给子组件即可。
样式的代码没展示，完整代码在最后

<!-- category组件-->
<template>
 <div class="category">
     <h3>{
  {title}}分类</h3>
      <ul>
        <li v-for="(item,index) in listData" :key="index">{
  {item}}</li>
      </ul>
 </div>
</template>

<script>
export default {
     
  name:'Category',
  //props接收传过来的数据
  props:['listData','title']
}
</script>

<!--App.vue-->
<template>
 <div class="container">
 	<!--将title和listData数据传给子组件,下面展示了两种使用组件方式-->
   <Category title="动漫" :listData="cartoons"></Category>
   <Category title="游戏" :listData="games"/>
   <Category title="电影" :listData="films"/>
 </div>
</template>

<script>
import Category from './components/category.vue'

export default {
     
  name: 'App',
  components: {
     
    Category
  },
  data(){
     
    return{
     
      cartoons:['海贼王','名侦探柯南','一人之下','未闻花名'],
      games:['4399','斗地主','王者荣耀','和平精英'],
      films:['《你好，李焕英》','《夏洛特烦扰》','《你的名字》','《蜘蛛侠》']
    }
  }
}
</script>

运行之后就是上面的样式了。在上面使用了三次组件，三次组件都是做了同样的展示。

默认插槽

有一天，领导找到小睡，说这个动漫分类和电影分类没有吸引力，你要在动漫分类里加上照片
电影分类里加上电影宣传片。

小睡一听，这还不简单，直接三下五除二在App.vue中改成以下代码。

   <Category title="动漫" :listData="cartoons">
     <img src="https://img2.baidu.com/it/u=4117582627,679171248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
   </Category>
   <Category title="游戏" >
   </Category>
   <Category title="电影">
     <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
   </Category>

小睡一运行，才发现动漫分类和电影分类里没有图片和视频。一问旁边的大佬，才知道原因，原来尽管解析了img标签后，需要把img标签加载到组件中去，但是不知道要把img标签放到哪个位置，所以就干脆不放。 为了解决上面的问题，就要使用插槽slot了。

插槽，我理解就是为在组件里挖一个坑的感觉，让组件使用者知道可以把一些标签填充在里面。
[补充]：可以在组件或App.vue中给img标签编写样式
因为解析了img标签后，把img标签填入组件中所以可以在组件或App.vue中给img标签编写样式
后来小睡将代码改成如下

<!--category组件代码-->