在Vue3之中的slot，是一种模板类的形式出现的，即子类，或者说引用类提供了对外暴露的接口，那么使用者或者说父类就可以声明如何使用插槽。
我们会分别说明基本的使用方式，进阶的指定使用，以及在使用的过程中，指定使用子类的哪部分数据。
首先是最简单的使用方式
一般来说，如果需要引入某些组件的时候，是首先在下面 import 。。。 from xxx
然后在上面的<template>之中，进行单标签的使用，就比如<category/>
但如果我们在子类中的template之中声明了
<slot>之后，我们就可以在父类之中注入某些数据从而进行展示
<template>
<div class=”item”>
<slot></slot>
</div>
<template>
父类之中，就可以
<category/>
<ul>
<li v-for=”g in games” :key=”g.id”>{{g.name}}</li>
</ul>
<category/>
在这种使用方式下，存在着一个问题，就是往往子类，或者说模板类中暴露了不同的插槽，我们也希望使用不同的插槽，那时候该怎么办呢？
这时候可以使用具名插槽
子组件中可以
<template>
<div class=”item”>
<slot name = ”s1”></slot>
<slot name = ”s2”></slot>
</div>
<template>
那么在父组件之中就可以指定名称来使用插槽
<category/>
<template v-slot:s1>
<ul>
<li v-for=”g in games” :key=”g.id”>{{g.name}}</li>
</ul>
<template>
<category/>
v-slot:s1的方式声明使用哪个插槽
当然，其还提供了一个语法糖
<template #s2>
最后是模板类还提供了一种在暴露插槽的同时，还暴露了数据给插槽使用着
首先是子组件如何暴露数据给插槽使用者
比如我们有一组数据
let games = reactive([
{id:’asgdytsa01′,name:’英雄联盟’},
{id:’asgdytsa02′,name:’王者荣耀’},
{id:’asgdytsa03′,name:’红色警戒’},
{id:’asgdytsa04′,name:’斗罗大陆’}
])
那么在对外提供插槽的时候，就可以连带着这组games进行暴露
<template>
<div class=”category”>
<h2>今日游戏榜单</h2>
<slot name=”s1” :games=”games” a=”哈哈”></slot>
</div>
</template>
这样在使用的时候
就可以利用冒号后的key获取并指定值了
<category/>
<template v-slot:s1=“params”>
<ul>
<li v-for=”g in params .games” :key=”g.id”>{{g.name}}</li>
</ul>
<template>
<category/>