¿Cómo puedo enviar un evento de carga desde un componente principal al componente secundario?
El componente secundario debe escuchar el evento de carga en un elemento definido por ranura y luego hacer algo con el evento.
Ejemplo:
Niño
<template> <slot></slot> </template> <script setup> // Do something with "imgloaded" // imgloaded = (e) => console.log(e); </script>Padre
<template> <child><img @load="imgloaded" src="mysrc1.jpg" /></child> <child><img @load="imgloaded" src="mysrc2.jpg" /></child> <child><img @load="imgloaded" src="mysrc3.jpg" /></child> </template>Gracias Oliver
Todo lo que está dentro de la ranura pertenece al padre, el niño no tiene acceso a él. Puede enviar accesorios al niño desde el padre si la imagen se carga o no.
Padre
<script setup> const child1 = ref(false) const child2 = ref(false) const child3 = ref(false) </script> <template> <child :load="child1"><img @load="child1=true" src="mysrc1.jpg" /></child> <child :load="child2"><img @load="child2=true" src="mysrc2.jpg" /></child> <child :load="child3"><img @load="child3=true" src="mysrc3.jpg" /></child> </template>niño
<template> <slot></slot> <div v-if="load">image load!</div> </template> <script setup> defineProps(["load"]); </script>