自定义组件向外抛出事件的本质是主动转发内部原生事件，而非阻止冒泡：Web Components 用 dispatchEvent 派发 CustomEvent；Vue 通过 $emit 透传；React 则依赖 props 回调函数显式传递。
在自定义组件中向外抛出事件，本质是让内部触发的原生事件（如点击、输入）能被父组件监听到。关键不是“阻止冒泡”，而是“主动转发”——把内部元素的事件捕获后，再通过自定义方式（如 dispatchEvent 或框架提供的 emit）通知外部。
使用原生 CustomEvent 手动派发
适合纯 Web Components 或无框架场景。内部监听原生事件，构造并派发自定义事件，父组件用 addEventListener 监听：
- 在组件内部（比如 shadow DOM 中的按钮）监听
click - 调用
this.dispatchEvent(new CustomEvent('my-click', { detail: { value: 'xxx' } })) - 父元素写
<my-button></my-button>并监听：el.addEventListener('my-click', e => console.log(e.detail))
Vue 中通过 $emit 转发
Vue 单文件组件里，子组件不直接暴露原生事件，而是用 v-on 绑定内部元素，再 $emit 向上透传：
- 模板中：
<button @click="$emit('confirm', payload)">确定</button> - 父组件用
@confirm="handleConfirm"接收，payload是传递的数据 - 想兼容原生事件名（如
click），可写@click.native或在 setup 中用defineExpose+ref暴露 DOM 元素
React 中通过 props 回调函数传递
React 没有事件冒泡穿透组件边界的概念，必须显式把回调函数作为 props 传入子组件：
立即学习“Java免费学习笔记（深入）”；
- 父组件传：
<MyButton onClick={handleClick} /> - 子组件内部按钮绑定：
<button onClick={props.onClick}>... - 若需修饰（如加 loading 状态），可在子组件内调用
props.onClick前做处理
注意事件冒泡本身不会跨组件边界
原生 DOM 事件冒泡只发生在同一 DOM 树中。自定义组件（尤其用了 Shadow DOM 或框架封装）会截断冒泡路径。所以不能依赖“内部 click 自动冒泡到父组件的 div 上”——必须主动转发。
真正需要阻止冒泡的场景，反而是防止内部事件意外影响外层布局（比如弹窗内点击不关闭弹窗），这时才用 event.stopPropagation()。
