vue3将事件从父级发送到子级

Question

如何从父组件向子组件发送加载事件?

子组件应该监听slot定义元素中的load事件，然后对该事件执行一些操作。

例子:

孩子

<template>
<slot></slot>
</template>
<script setup>
// Do something with "imgloaded"
// imgloaded = (e) => console.log(e);
</script>

父母

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

谢谢奥利弗

Answer 1

slot中的所有内容都属于父元素，子元素无法访问它。无论图像是否加载，你都可以从父元素中向子元素发送props。

父母

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

孩子

<template>
<slot></slot>
<div v-if="load">image load!</div>
</template>
<script setup>
defineProps(["load"]);
</script>