关键在于利用 $attrs + v-bind="$attrs" 让事件监听器自动挂载到目标元素，而非手动转发；需确保未在 emits 中声明事件、禁用 inheritAttrs 时显式绑定、避免多根节点或命名不匹配导致透传失效。
在封装高阶组件（HOC）时，想把父组件传来的自定义事件（比如 @change、@submit、@click 等）原封不动地交给最内层的真实组件响应，关键不是“转发事件”，而是**让事件监听器自然挂载到目标元素上**——这和原生 DOM 事件冒泡机制一致，也符合 Vue 的事件透传逻辑。
Vue 中 HOC 封装时的事件透传本质
Vue 没有“HOC”这个原生概念，但函数式组件或包装型组件（如 <MyInput> 封装了 <input>）就承担了类似角色。此时事件透传的核心是：不拦截、不重定义、不手动 $emit，而是靠 $attrs + v-on="$attrs" 让事件监听器自动落到子组件根节点。
- 父组件传入事件：
<MyInput @input="onInput" @blur="onBlur" /> -
MyInput不在emits中声明这些事件（否则会被过滤掉），也不写@input在模板里 - 直接用
<input v-bind="$attrs" />—— 此时@input和@blur会作为原生监听器绑定到<input>上 - 只要底层
<input>触发了原生input或blur事件，父组件的回调就会执行
React 中对应做法：事件属性直接透传
React 函数式组件中，事件就是普通 props（如 onClick、onChange），天然支持透传。只需确保最终渲染的 DOM 元素接收并响应它：
- 写法示例：
function MyInput(props) { return <input {...props} />; } - 父组件调用：
<MyInput onChange={handleChange} onClick={handleClick} /> - 输入框触发 change 时，
handleChange直接执行；点击时handleClick执行 - 注意：不要在中间层做
onChange={(e) => props.onChange?.(e)}这类手动桥接——除非你要加工参数，否则纯透传更轻量、不易出错
跨框架或 Web Components 场景下的透传要点
当高阶封装面向多框架（如用 Web Components 做底层），事件透传需依赖标准 CustomEvent 机制：
- 父组件监听的是
my-change这类自定义事件 - 包装层（adapter）不能吞掉事件，而应监听底层组件 dispatch 的事件，并重新 dispatch 到自身（保持事件名、detail 不变）
- 例如 Vue adapter 中：
innerEl.addEventListener('my-change', e => this.$emit('my-change', e.detail)) - React adapter 中：
innerEl.addEventListener('my-change', e => props.onMyChange?.(e.detail))
哪些情况会导致透传失效？
常见断点不是代码没写对，而是语义或配置干扰了事件链：
- 子组件设置了
inheritAttrs: false却没手动v-bind="$attrs"—— 事件监听器被丢弃 - 使用了多根节点（multiple root nodes），
$attrs默认不自动绑定到某个节点，需显式指定v-bind="$attrs"到目标元素 - 事件名用了驼峰（如
@myEvent），但底层组件只触发 kebab-case 形式（my-event），大小写/格式不匹配导致监听失败 - React 中用 Fragment（
<></>）包裹，导致事件无法绑定到真实 DOM 节点
