Web Components是一套浏览器原生的组件化标准，包含Custom Elements、Shadow DOM、HTML Templates等核心技术，能够创建可复用、隔离性强的自定义组件。在复杂项目中，多个组件之间需要传递数据、同步状态，设计一套可扩展的通信机制是开发的核心环节。
基础通信方式：属性传值与自定义事件
1. 父组件向子组件传值：属性绑定
父组件可以通过设置子组件的HTML属性传递数据，子组件需要在类中定义属性的观测逻辑，当属性变化时更新内部状态。
// 定义子组件
class ChildComponent extends HTMLElement {
// 声明需要观测的属性
static get observedAttributes() {
return ['message'];
}
// 属性变化时触发
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'message') {
this.render(newValue);
}
}
render(msg) {
this.shadowRoot.innerHTML = `<div>接收到的消息：${msg}</div>`;
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
// 初始化渲染
this.render(this.getAttribute('message') || '默认消息');
}
}
// 注册组件
customElements.define('child-component', ChildComponent);
父组件使用时直接设置属性即可：
<child-component message="父组件传递的数据"></child-component>
2. 子组件向父组件通信：自定义事件
子组件可以通过dispatchEvent派发自定义事件，父组件监听该事件即可获取子组件传递的数据，这种方式符合浏览器的事件模型，兼容性较好。
class ChildComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button>点击向父组件发消息</button>`;
this.shadowRoot.querySelector('button').addEventListener('click', () => {
// 派发自定义事件，携带数据
const event = new CustomEvent('child-message', {
detail: { content: '子组件的数据', time: new Date().toLocaleString() },
// 允许事件冒泡，父组件可以监听到
bubbles: true,
// 允许跨Shadow DOM边界传递
composed: true
});
this.dispatchEvent(event);
});
}
}
customElements.define('child-component', ChildComponent);
// 父组件监听事件
document.querySelector('child-component').addEventListener('child-message', (e) => {
console.log('父组件接收到：', e.detail);
});
可扩展通信方案：事件总线
当组件层级较深、多个不相关组件需要通信时，基础的一对一通信方式会变得难以维护，此时可以引入事件总线（Event Bus）方案，所有组件都通过总线发布和订阅事件，降低组件间的耦合度。
事件总线实现
事件总线本质是一个全局的事件管理中心，提供on订阅事件、emit发布事件、off取消订阅的能力。
class EventBus {
constructor() {
// 存储事件和对应的回调函数队列
this.eventMap = {};
}
// 订阅事件
on(eventName, callback) {
if (!this.eventMap[eventName]) {
this.eventMap[eventName] = [];
}
this.eventMap[eventName].push(callback);
}
// 发布事件
emit(eventName, data) {
const callbacks = this.eventMap[eventName];
if (callbacks && callbacks.length > 0) {
callbacks.forEach(callback => {
callback(data);
});
}
}
// 取消订阅
off(eventName, callback) {
const callbacks = this.eventMap[eventName];
if (callbacks) {
this.eventMap[eventName] = callbacks.filter(cb => cb !== callback);
}
}
}
// 创建全局唯一的事件总线实例
const globalEventBus = new EventBus();
组件中使用事件总线
任意组件都可以引入全局事件总线，发布或订阅事件，不需要知道其他组件的存在，扩展性极强。
// 组件A：发布事件
class ComponentA extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button>发布更新事件</button>`;
this.shadowRoot.querySelector('button').addEventListener('click', () => {
globalEventBus.emit('data-update', { value: Math.random() });
});
}
}
customElements.define('component-a', ComponentA);
// 组件B：订阅事件
class ComponentB extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<div>等待数据更新...</div>`;
// 订阅事件
this.updateCallback = (data) => {
this.shadowRoot.querySelector('div').textContent = `接收到更新：${data.value}`;
};
globalEventBus.on('data-update', this.updateCallback);
}
disconnectedCallback() {
// 组件销毁时取消订阅，避免内存泄漏
globalEventBus.off('data-update', this.updateCallback);
}
}
customElements.define('component-b', ComponentB);
不同通信方式的适用场景
| 通信方式 | 适用场景 | 优势 | 劣势 |
|---|---|---|---|
| 属性传值 | 父子组件直接传值，数据流向简单 | 符合HTML原生使用习惯，直观易懂 | 只能父传子，深层嵌套需要逐层传递 |
| 自定义事件 | 子组件向父组件反馈数据 | 遵循浏览器事件模型，兼容性好 | 只能子传父，多层嵌套需要逐层监听 |
| 事件总线 | 任意组件间通信，复杂项目状态同步 | 解耦组件，扩展性强，支持多对多通信 | 需要管理事件订阅，避免内存泄漏 |
通信机制设计注意事项
- 优先使用基础通信方式处理简单的父子组件交互，减少不必要的复杂度
- 使用事件总线时，组件销毁阶段一定要取消对应的事件订阅，避免回调函数持有组件实例导致内存无法释放
- 自定义事件的名称建议添加组件前缀，避免不同组件的同名事件冲突，例如
user-component:login - 传递的数据尽量保持简单，避免传递复杂的DOM对象或循环引用的对象，减少序列化成本和潜在问题
Web_Components自定义事件props传值事件总线组件通信修改时间：2026-07-21 17:06:22