在 Vue 中，@paste 事件本身不具有目标组件上下文，若直接委托给动态悬停的组件，需通过 @mouseenter/@mouseleave 手动维护当前活跃组件实例，并在粘贴时调用其暴露的方法，才能准确访问对应 props.id。
在 vue 中，`@paste` 事件本身不具有目标组件上下文，若直接委托给动态悬停的组件，需通过 `@mouseenter`/`@mouseleave` 手动维护当前活跃组件实例，并在粘贴时调用其暴露的方法，才能准确访问对应 `props.id`。
当在多个同类型组件（如 <comp id="1"></comp>, <comp id="2"></comp>）中监听全局粘贴行为时，一个常见误区是：试图在根容器上用 @paste 直接读取 props.id——但此时 props 属于父作用域或未定义，无法反映“当前被悬停的组件”。根本原因在于：paste 事件冒泡路径中不携带组件实例上下文，且 props 是编译时绑定、运行时静态的，无法随鼠标位置动态切换。
正确解法是采用“状态委托 + 实例通信”模式：
-
用
@mouseenter记录当前悬停组件实例：借助getCurrentInstance()获取当前组件的响应式实例引用； -
用
defineExpose显式暴露处理函数：使外部（如父容器）可安全调用该组件的onPaste方法； -
在根容器统一监听
@paste，并转发至current?.exposed.onPaste()：确保执行上下文与悬停组件严格一致； -
配合
@mouseleave清理状态，避免内存泄漏或误触发。
以下为精简可靠的实现示例：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
<script setup>
import { ref, getCurrentInstance, onUnmounted } from 'vue'
const props = defineProps({ id: Number })
const self = getCurrentInstance()
const current = ref()
const click = () => {
console.log('click', props.id) // ✅ 点击时 props.id 始终准确
}
const onPaste = (event) => {
console.log('paste on id:', props.id) // ✅ 此时 props.id 即悬停组件的真实 id
}
defineExpose({ onPaste })
// 组件卸载时清理引用，防止内存泄漏
onUnmounted(() => {
if (self === current.value) current.value = null
})
</script>
<template>
<div
class="comp"
@click="click"
@paste.prevent="current?.exposed?.onPaste($event)"
@mouseenter="current = self"
@mouseleave="current = null"
>
id: {{ id }}
</div>
</template>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须使用
.prevent阻止默认粘贴行为，否则可能触发浏览器默认插入逻辑； -
current?.exposed?.onPaste的双重可选链（?.）确保安全调用，避免current为空或exposed未定义时报错； - 不推荐使用
document.addEventListener('paste')全局监听——它脱离组件生命周期，难以精准关联props，且需手动管理事件销毁； - 若存在嵌套或滚动容器，需确保
@mouseenter/@mouseleave触发稳定（必要时可用@mouseover+event.relatedTarget做防抖增强）。
该方案兼顾响应性、可维护性与 Vue 3 Composition API 最佳实践，是解决“悬停态粘贴获取正确 props”问题的标准范式。
