插槽有三种：

目录

1.普通插槽

2.具名插槽

3.作用域插槽

---

1.普通插槽

sub.vue 子组件 --- 子组件写slot标签，父组件的Sub标签内填写的内容会显示在slot的位置，父组件如果不写内容就会展示默认内容。

<template><div class="card"><p>这是子组件本身的内容</p><slot>这是默认内容--如果父组件不传值就会展示这些</slot></div>
</template>

index.vue 父组件

<template><div class="card"><Sub><h2>我要传过去</h2></Sub></div>
</template>

展示效果：

2.具名插槽

sub.vue 子组件 --- 用name属性定义每个插槽的名字

<template><div class="card"><p>这是子组件本身的内容</p><slot name="slot1">这是第一个插槽</slot><p>穿插内容</p><slot name="slot1">这是二个插槽</slot><p>隔断内容</p><slot name="slot1">这是第三个插槽</slot></div>
</template>

index.vue 父组件 --- 父组件通过#号匹配子组件中对应的插槽位置

<template><div class="card"><Sub><template #slot1><h1>传递内容1</h1></template><template #slot2><h2>传递内容2</h2></template><template #slot3><h3>传递内容3</h3></template></Sub></div>
</template>

展示效果：

3.作用域插槽

sub.vue 子组件 --- message和count为子组件要传递给父组件的数据

<template><div class="card"><p>这是子组件本身的内容</p><slot message="123" count="1"></slot></div>
</template>

index.vue 父组件 --- 子组件传递过来的内容可以在父组件中使用，比如列表中点击取值

<template><div class="card"><Sub v-slot="slotProps"><h1>传递内容{{ slotProps.message }} {{ slotProps.count }}</h1></Sub></div>
</template>

或者：另一种写法---配合具名插槽

sub.vue 子组件  

<template><div class="card"><p>这是子组件本身的内容</p><slot name="name" message="123" count="1"></slot></div>
</template>

index.vue 父组件

<template><div class="card"><Sub><template #name="slotProps"><h1>传递内容{{ slotProps.message }} {{ slotProps.count }}</h1></template></Sub></div>
</template>

展示效果：