自定义元素通过 dispatchEvent 派发 bubbles: true 的 CustomEvent，数据置于 detail 字段，父级用 addEventListener 或框架语法（如 Vue @事件名、React onDataUpdated）监听；关键点：必须冒泡、细节放 detail、事件名用短横线。
自定义元素（Custom Elements）本身是原生 Web Components 规范的一部分，不依赖 Vue 或 React。它通过 dispatchEvent 派发自定义事件，父级组件（无论是否为 Vue、React 或纯 HTML）都可通过 addEventListener 监听。关键在于：事件必须是 冒泡的 CustomEvent，且数据通过 detail 属性传递。
定义可派发事件的自定义元素
在自定义元素类中，调用 this.dispatchEvent(new CustomEvent('事件名', { detail: 数据, bubbles: true })) 即可向父级冒泡派发携带数据的事件。
-
必须设置
bubbles: true，否则事件无法穿透 Shadow DOM 或到达外层父容器 -
数据统一放在
detail字段中，这是 CustomEvent 的标准约定，兼容所有框架监听逻辑 - 事件名建议用短横线格式（如
data-updated），避免与原生事件冲突
在 Vue 父组件中监听自定义事件
Vue 模板中直接用 @事件名（注意不是 @update:data 这类 Vue 特有语法），Vue 会自动绑定原生事件监听器。
- 例如：
<my-input></my-input> - 方法中通过
$event.detail获取数据：handleUpdate(e) { console.log(e.detail.value) } - 若需 v-model 绑定，可在自定义元素内监听 input/change 并派发
input事件，同时设置valueproperty —— 这样 Vue 的v-model会自动识别
在 React 或纯 HTML 父级中监听
React 使用 onDataUpdated（驼峰命名）或原生 addEventListener；纯 HTML 直接写 ondataupdated 属性或 JS 监听。
- React 示例：
<my-input ondataupdated="{(e)"> setVal(e.detail.value)} /></my-input> - HTML 示例：
<my-input ondataupdated="console.log(event.detail)"></my-input> - 注意：React 对小写短横线事件名不自动转换，推荐用
addEventListener更稳妥
常见问题排查点
派发失败通常不是语法错误，而是细节遗漏：
- 忘记加
bubbles: true，导致事件被截断在 Shadow DOM 内 - 把数据塞进
event.data或其他字段，而非标准的detail - 父级监听的是子元素内部节点（如按钮），而不是自定义元素标签本身
- 事件名大小写不一致（
dataChange和data-change是不同事件）
