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

前情提要：深入vue2/3： 插槽 ＜slot＞ / v-slot 的使用与讲解_oumae-kumiko的博客-CSDN博客

若不会插槽的使用请先看该文章，下面的API内容全部基于上述内容！

---

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

• 使用条件：

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

<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 等价。

<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 对象。

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

---

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

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