slot插槽分为哪几种

1.匿名插槽 2.具名插槽 3.作用域插槽

区别和使用类型

匿名插槽：

• 1.如果父组件不输入内容则显示slot插槽的默认内容

• 2.匿名插槽在一个组件中一般只有一个

• 3. 在使用子组件的时候，在子组件中写的结构默认会覆盖所有匿名slot位置

子组件
<template>
    <div>
      <slot>默认内容</slot>
    </div>
</template>

具名插槽：

• 1.子组件--为solt设置name属性

<slot name='left'></slot>

• 2.父组件通过template，通过v-slot：插槽名称使用子组件的插槽

<template #left>
        后退
      </template>

• 3.v-slot:可以简写为#
• 4.如果没有指定内容，则使用默认值，如果指定的内容就使用内容覆盖插槽位置
• 5.一个组件中，可以有多个具名插槽

作用域插槽：

• 1.作用：可以提升组件渲染的灵活性
• 2.渲染的方式和父组件来决定

实现方式

• 3.在子组件中添加slot,在slot上绑定数据。

<slot name='myslot'
          :data='myname'
          aa='qq'
          cc='tt'></slot>

• 4.在父组件中使用子组件的位置。通过v-slot:插槽名称=‘变量名称’可以接收到子组件通过插槽传递的所有数据，生成一个对象
• 5.在父组件中接收数据的时候可以使用解构

<myscope #myslot='scope'>
      <p>{{scope}}</p>
    </myscope>
   <myscope>
 <template #myslot='scope'>
   处理方式
</template>
</myscope>