Vue3中遍历$slots对象传递父组件插槽至子组件失败问题求助

我明白你遇到的困扰了——在Vue3里尝试遍历$slots把父组件的所有插槽传给子组件时，不仅$slots看起来是空的，还碰到了TypeError: Cannot read properties of null (reading 'key')的错误。这其实是因为Vue3对插槽的处理逻辑和Vue2有不少差异，咱们一步步来解决：

问题根源 #

1. $slots的响应式与结构变化：Vue3中的$slots不再是响应式对象，它的结构是「插槽名称对应插槽函数」，直接在模板里遍历可能会因为初始化时机或包含无效值导致报错。
2. 未过滤无效插槽：有时候$slots里会包含null值（比如未被激活的插槽），遍历这些null值就会触发你看到的错误。

正确解决方案 #

步骤1：用useSlots()获取并处理响应式插槽 #

在子组件中，改用Vue3的组合式APIuseSlots()来获取插槽，它会返回响应式的插槽对象，比直接用$slots更可靠。同时我们可以过滤掉无效的null插槽：

<script setup>
import { useSlots, computed } from 'vue';
// 获取响应式插槽对象
const slots = useSlots();
// 过滤掉null值的插槽，避免遍历报错
const validSlots = computed(() => {
  return Object.fromEntries(
    Object.entries(slots).filter(([_, slot]) => slot !== null)
  );
});
</script>

步骤2：正确转发插槽给子组件 #

在模板里，遍历我们处理后的validSlots，把每个插槽转发给目标子组件（比如你的q-input），注意要把目标组件传递的插槽props（也就是scope）透传给父组件的插槽：

<template>
  <div class="row justify-center">
    <q-input v-model="componentValue" v-bind="$attrs" style="width: 250px">
      <!-- 遍历有效插槽，转发给q-input -->
      <template 
        v-for="(_, slotName) in validSlots" 
        :key="slotName" 
        v-slot:[slotName]="scope"
      >
        <slot :name="slotName" v-bind="scope" />
      </template>
    </q-input>
    <q-separator class="full-width" color="secondary" />
    <div class="bg-negative full-width q-pa-lg">
      已存在的插槽：{{ Object.keys(validSlots) }}
    </div>
  </div>
</template>

额外说明 #

• 为什么之前$slots看起来是空的？因为Vue3的$slots里存储的是插槽函数，直接在模板中打印对象的话，浏览器会显示成{}，但你可以通过Object.keys($slots)来查看实际存在的插槽名称。
• 一定要给v-for加上:key="slotName"，这是Vue的强制要求，能避免渲染时的警告和错误。

这样修改后，你就能成功把父组件的所有插槽传递给子组件，而且不会再碰到那个null相关的错误了。

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