Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

367
Vistas
no se puede recorrer el objeto $slots en Vue 3 para pasar todas las ranuras de padre a hijo

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')

TypeError: no se pueden leer las propiedades de nulo (leyendo 'clave')

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>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda