Vue3父组件如何向子组件传递load事件供插槽元素监听处理

首先明确两个核心前提：

• 插槽内的DOM归属父组件作用域编译，子组件默认无法直接访问插槽内元素的事件绑定
• img的load事件不会向上冒泡，无法通过在外层容器绑定事件的方式做委托监听

下面给两种可落地的实现方案，按需选择即可。

方案1：作用域插槽暴露处理方法（推荐，无DOM操作，符合Vue设计规范） #

这个方案逻辑最清晰，没有黑科技，维护成本最低。核心是把子组件内部的事件处理方法通过作用域插槽传给父组件，父组件直接绑定到对应img上即可。
子组件代码：

<template>
  <!-- 通过作用域插槽向外暴露内部的load处理方法 -->
  <slot :handleImgLoad="handleImgLoad"></slot>
</template>

<script setup>
const handleImgLoad = (e) => {
  console.log('子组件接收到图片load事件', e)
  // 在这里写你的自定义处理逻辑即可
}
</script>

父组件调用时通过v-slot拿到子组件暴露的方法，绑定到img的load事件上：

<template>
  <Child v-slot="{ handleImgLoad }">
    <img @load="handleImgLoad" src="mysrc1.jpg" />
  </Child>
  <Child v-slot="{ handleImgLoad }">
    <img @load="handleImgLoad" src="mysrc2.jpg" />
  </Child>
  <Child v-slot="{ handleImgLoad }">
    <img @load="handleImgLoad" src="mysrc3.jpg" />
  </Child>
</template>

方案2：子组件内部查询DOM手动绑定事件（无需修改父组件原有写法） #

如果你不想调整父组件的调用代码，可以在子组件渲染完成后，查询插槽容器内的所有img元素，手动绑定load事件，注意要在组件卸载时移除监听避免内存泄漏。
子组件代码：

<template>
  <div ref="slotWrap">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const slotWrap = ref(null)
const handleImgLoad = (e) => {
  console.log('子组件接收到图片load事件', e)
  // 在这里写你的自定义处理逻辑即可
}

onMounted(() => {
  // 查找容器内所有图片，逐个绑定事件
  const imgList = slotWrap.value.querySelectorAll('img')
  imgList.forEach(img => {
    img.addEventListener('load', handleImgLoad)
  })
})

onBeforeUnmount(() => {
  // 组件销毁前移除事件监听
  const imgList = slotWrap.value?.querySelectorAll('img') || []
  imgList.forEach(img => {
    img.removeEventListener('load', handleImgLoad)
  })
})
</script>

这个方案下父组件不需要做任何修改，保持原有写法即可。注意如果插槽内容是异步渲染的（比如有v-if切换、异步组件延迟加载），需要在DOM更新后重新执行元素查询和事件绑定逻辑，避免漏绑。

内容的提问来源于stack exchange，提问作者Oliver