$slots （声明了slot的子组件才使用该api）

使用条件：
1. 该API是在选项式API里使用的。也可在template里{{$slots}}进行访问。
2. 功能：一个表示父组件所传入插槽的对象。
3. 用于手写渲染函数，也可用于检测是否存在插槽。
4. 每一个插槽都在 this. $slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。如：默认插槽则暴露为 this.$ slots.default。具名插槽则是this.$slots.slotName ；"slotName"就是具名插槽的name。
5. 需要使用渲染函数搭配渲染插槽的场景很少，当你需要的时候，说明功力不俗了，涉及内容较多本文章不进行讲述。

javascript 复制代码

<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
    created(){
        console.log('$slots----',this.$slots);
        // console.log('$slots----',this.$slots.default()); // 调用对应实例插槽的api拿到插槽的内容。
        // console.log('$slots----',this.$slots.JuMingSlot());
    }
})
</script>

useSlots （声明了slot的子组件才使用该api）

使用条件：
1. 该API是在 setup 组合式API里使用的。
2. 其他功能描述同 $slots 一致。
3. useSlots()的返回值与 $slots 和 setupContext.slots 等价。

javascript 复制代码

<script lang='ts'>
import { defineComponent, useSlots } from 'vue'
export default defineComponent({
    setup(props, content){
        console.log(content.slots);
    }
})
</script>
<script setup lang='ts'>
import { useSlots } from 'vue'
cosnt slots = useSlots()
</script>

defineSlots() （声明了slot的子组件才使用该api）

使用条件：
1. 该API是在 <script setup> 里使用的。
2. 仅支持 Vue 3.3+ 的版本。就因为新增了这API，让我写了这文章。
3. 其他功能描述同 $slots 一致。
4. 这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。
5. defineSlots() 只接受TS类型参数，没有运行时参数。也就是说你项目不是TS的话，就不用看这个了。
6. 它还返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。

TypeScript 复制代码

<script setup lang="ts">
const slots = defineSlots<{
  // key > default 是插槽名称
  // 值类型是插槽函数
    // 函数的第一个TS对象类型参数是插槽期望接收的 props 的TS类型
    // 返回值类型目前被忽略，可以是 any，但官方说将来可能会利用它来检查插槽内容。
  default(props: { msg: string }): any
}>()
</script>

QQ交流群：522976012 ，欢迎来玩。

聚焦vue3，但不限于vue，任何前端问题，究其本质，值得讨论，研究与学习。

【vue3】defineSlots, useSlots, $slots 记录/讲解

$slots （声明了slot的子组件才使用该api）

useSlots （声明了slot的子组件才使用该api）

defineSlots() （声明了slot的子组件才使用该api）