How can I send a load event from a parent component to the child component?
The child component should listen to the load event in a slot defined element and then do something with the event.
Example:
Child
<template>
<slot></slot>
</template>
<script setup>
// Do something with "imgloaded"
// imgloaded = (e) => console.log(e);
</script>
Parent
<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>
Thanks Oliver
Everything inside the slot belongs to the parent, the child has no access to it. You can send props to the child from the parent if image load or not.
Parent
<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>
child
<template>
<slot></slot>
<div v-if="load">image load!</div>
</template>
<script setup>
defineProps(["load"]);
</script>