No puedo recorrer el objeto $slots en Vue 3 para pasar todas las ranuras de padre a hijo, el objeto $slots parece vacío en el componente secundario.
¿Cómo puedo recorrer el objeto $slots para pasar todas las ranuras principales al componente secundario?
Recibo este error cuando ejecuto el código: TypeError: Cannot read properties of null (reading 'key')
Aquí hay un sandbox sobre mi problema y puede descomentar la línea 5 para ver el resultado completo: https://codesandbox.io/s/blazing-bush-g7c9h?file=/src/pages/Index.vue
Ejemplo de GitHub: https://github.com/firibz/vue3slots
padre:
<system-input filled v-model="text" label="input"> <template v-slot:before> <q-icon name="mail" /> </template> </system-input>niño:
<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>Tienes que usar Object.keys($slots) para usar las ranuras en 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>