【slot分为匿名插槽+具名插槽+作用域插槽】

我会以插槽常用的有几种、插槽的作用、分别如何使用、使用场景

插槽分为匿名插槽/具名插槽/作用域插槽

插槽的作用是我们可以给组件预留空间自己定义内容

匿名插槽： 不写name属性时的使用方法就叫匿名插槽,其时所谓的匿名插槽是有名字的 他的名字是default
具名插槽： 可以通过v-slot:插槽的名字 , 给指定的插槽定义内容 ,v-slot:名字可以简写为 #名字
作用域插槽： 插槽也可以通过自定义属性预备插槽需要使用的数据 而这种插槽就叫做作用域插槽，
使用场景比如在我写后台管理系统的时候，用到了表格，表格有操作列，
里面需要使用插槽自定义列写按钮，还有我们的组件中在子组件定义一个具名插槽，
在父组件就可以传入不同的数据，利用name属性，显示不同的内容

子组件

  <!-- // 默认插槽 可以省略name default-->
  <slot></slot>

  <!-- //具名插槽 要指定name属性-->
  <slot name="h"></slot>

  <!-- // 作用域插槽  要指定name和自定义属性，自定义属性绑定数据-->
  <slot name="z" :say1="say1" :say2="say2"></slot>

</div>

父组件

  <!-- 默认插槽/我其实也有名字是#default -->
  <template>
    <div>
      我是盖伦-----默认插槽/我其实也有名字是#default,只是默认插槽可以在template不写名字
    </div>
  </template>

  <!-- 具名插槽 在template v-solt:xx名字 -->
  <template v-slot:h>
    <div>
      我是皇朝
    </div>
  </template>

  <!-- 具名插槽 v-slot:h 简写#h -->
  <template #z>
    <div>
      我是赵云
    </div>
  </template>

  <!-- 作用域 插槽可以写数据 -->
  <!-- 结构子组件数据出来 say1, say2-->
  <template #z="{say1, say2}">
    <div>{{say1}}</div>
    <div>{{say2}}</div>
  </template>

</com>

完!

A lot can happen between now and never.
把握当下，一切皆有可能。