我无法遍历 Vue 3 中的 $slots 对象以将所有插槽从父级传递给子级,$slots 对象在子组件中似乎为空。
如何遍历 $slots 对象以将所有父插槽传递给子组件?
运行代码时出现此错误:TypeError: Cannot read properties of null (reading 'key')
这是一个关于我的问题的沙箱,您可以取消注释第 5 行以查看完整结果: https ://codesandbox.io/s/blazing-bush-g7c9h?file=/src/pages/Index.vue
GitHub 示例: https ://github.com/firibz/vue3slots
家长:
<system-input filled v-model="text" label="input">
<template v-slot:before>
<q-icon name="mail" />
</template>
</system-input>
孩子:
<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>