Vue3中useSlots获取的slots变量莫名为空问题求助

核心原因 #

Vue3 中 useSlots() 返回的插槽对象初始为空，插槽内容是在组件渲染阶段才会被填充的函数集合。直接在模板中打印整个 slots 对象时，插值求值时机早于插槽填充时机，因此显示为空对象 {}，但插槽本身的渲染逻辑不受影响——Vue 内部会在正确时机处理插槽渲染。

另外，useSlots() 返回的是非响应式对象，但插槽的存在状态会随父组件传递的插槽变化动态更新，只是直接打印对象无法看到实时状态。

正确的插槽检查与获取方式 #

1. 在生命周期钩子中访问插槽 #

组件挂载完成后，插槽已被填充，此时能准确获取插槽信息：

<script setup lang="ts">
import { useSlots, onMounted } from 'vue'

const slots = useSlots()

onMounted(() => {
  // 检查test插槽是否存在
  console.log('test插槽存在:', !!slots.test)
  // 获取test插槽的渲染内容（VNode数组）
  if (slots.test) {
    console.log('test插槽内容:', slots.test())
  }
})
</script>

2. 在模板中检查插槽存在性或获取内容 #

不要直接打印整个 slots 对象，针对具体插槽进行判断或访问：

<template>
  <!-- 检查test插槽是否存在 -->
  test插槽是否存在：{{ !!slots.test }}
  <!-- 显示test插槽的文本内容（简化版） -->
  test插槽内容：{{ slots.test ? slots.test()[0].children : '默认内容' }}

  <slot name="test"> aaaaa </slot>
  <!-- 其他模板内容 -->
</template>

3. 用计算属性封装插槽状态 #

如果需要在模板或逻辑中复用插槽状态，可通过计算属性封装：

<script setup lang="ts">
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 计算属性：判断test插槽是否存在
const hasTestSlot = computed(() => !!slots.test)
// 计算属性：获取item-actions插槽（如果存在）
const itemActionsSlot = computed(() => slots['item-actions'])
</script>

模板中使用示例：

<template>
  <div v-if="hasTestSlot">test插槽已传入</div>
  <!-- 其他内容 -->
</template>

关键注意点 #

• 不要直接打印 useSlots() 返回的整个对象，初始为空且非响应式，控制台显示的是初始快照。
• 每个插槽是返回VNode数组的函数，需调用 slots.slotName() 才能获取实际渲染内容。
• Vue3 中不推荐在 setup 里使用 $slots，统一用 useSlots() API。

内容的提问来源于stack exchange，提问作者Jer