无法循环遍历 Vue 3 中的 $slots object 以将所有插槽从 parent 传递到 child

Question

我无法循环遍历 Vue 3 中的 $slots object 以将所有插槽从 parent 传递到 child，$slots object 在child 组件。

如何遍历 $slots object 以将所有 parent 插槽传递给 child 组件？

当我运行代码时出现此错误：类型错误：无法读取 null 的属性（读取 'key'）

这是关于我的问题的沙箱，您可以取消注释第 5 行以查看完整结果： https://codesandbox.io/s/blazing-bush-g7c9h?file=/src/pages/Index.vue

GitHub 示例： https://github.com/firibz/vue3slots

parent:

<system-input filled v-model="text" label="input">
  <template v-slot:before>
    <q-icon name="mail" />
  </template>
</system-input>

child:

  <div class="row justify-center">
    <q-input v-model="componentValue" v-bind="$attrs" style="width: 250px">
      <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope"/>
      </template>
    </q-input>
    <q-separator class="full-width" color="secondary" />
    <div class="bg-negative full-width q-pa-lg">slots: {{ $slots }}</div>
    <div class="bg-warning full-width q-pa-lg">slots: {{ $slots.before }}</div>
  </div>

Answer 1

您必须使用 Object.keys($slots) 才能在 v-for 上使用插槽。

<q-input v-model="componentValue" v-bind="$attrs" style="width: 250px">
  <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
    <slot :name="slot"></slot>
  </template>
</q-input>

无法循环遍历 Vue 3 中的 $slots object 以将所有插槽从 parent 传递到 child

can not loop through $slots object in Vue 3 to pass all slots from parent to child

javascript

vue.js

quasar-framework

vuejs3

vuejs-slots