【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. 需要使用渲染函数搭配渲染插槽的场景很少,当你需要的时候,说明功力不俗了,涉及内容较多本文章不进行讲述。
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,任何前端问题,究其本质,值得讨论,研究与学习。

相关推荐
vivo互联网技术10 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆10 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙10 小时前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜10 小时前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort10 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney10 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥10 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT10 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare10 小时前
选择文件夹路径
前端
艾小码10 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js