大家好，我是第八哥。在做 Web Components 的时候，我常常遇到一个痛点：组件间通信不顺畅。大多数时候我们会用 CustomEvent 来解决，但如果不了解它的细节，往往会踩坑。今天我就结合实战，来聊聊这些问题和解决方案。
为什么要用 CustomEvent
在 Shadow DOM 或组件内部，直接用事件是最自然的通信方式。CustomEvent 允许我们传递数据，解耦组件逻辑。但默认配置下，它可能并不会如你预期的那样冒泡或穿透。
常见陷阱1：bubbles 默认值
很多人忘记设置 bubbles: true，结果事件被触发了，但是外部却无法监听。例如：
this.dispatchEvent(new CustomEvent('user-login'));这种写法只会停留在组件内部。
正确的写法如下：
this.dispatchEvent(new CustomEvent('user-login', {
bubbles: true,
detail: { id: 101 }
}));这样事件才能沿着 DOM 树进行冒泡。
常见陷阱2：composed 属性
如果组件用了 Shadow DOM，那么事件即使设置了 bubbles: true，也可能会被 Shadow DOM 阻断。这时就必须加上 composed: true。
this.dispatchEvent(new CustomEvent('user-login', {
bubbles: true,
composed: true,
detail: { id: 101 }
}));加上 composed，事件就能穿透 Shadow 边界了。
常见陷阱3：事件命名
一些开发者习惯用大写或驼峰命名，但标准事件建议使用小写加中划线来命名，比如 user-login。这样能避免和原生事件混淆，也更利于跨框架兼容。
调试技巧
- 1. 用
console.log(event.composedPath())查看事件传播路径。 - 2. 在 Chrome DevTools 的 Event Listeners 面板中验证事件是否被捕获。
- 3. 避免直接依赖第三方库封装，先搞清楚原生 CustomEvent 的行为。
实战案例：父子组件通信
子组件触发事件：
// child.js
this.dispatchEvent(new CustomEvent('submit-form', {
bubbles: true,
composed: true,
detail: { name: 'Tom' }
}));父组件监听：
// parent.js
childElement.addEventListener('submit-form', e => {
console.log('表单数据:', e.detail);
});优缺点分析
优点： 解耦、原生支持、语义清晰。
缺点： 配置繁琐，容易遗漏 bubbles 或 composed，新手容易踩坑。
总结
在 Web Components 中，CustomEvent 是必备的通信手段。要避免陷阱，记住三点：事件必须冒泡（bubbles）、必须可穿透（composed）、必须语义化命名。掌握这些细节，你的组件通信会更稳健。
评论