HTML组件状态共享：利用自定义DOM事件实现父子模版解耦通信的方法-html教程-PHP中文网

customevent + dispatchevent + addeventlistener 可实现跨框架组件通信，因其不依赖运行时、能穿透 shadow dom（需 composed: true）、天然冒泡且通用；适用于 cms、微前端等场景，但需规范事件命名与 detail 结构。

html组件状态共享：利用自定义dom事件实现父子模版解耦通信的方法

直接用 CustomEvent + dispatchEvent + addEventListener 就能绕过框架限制，在纯 HTML 模板（如 Vue 的 <template></template>、React 的 JSX 片段、甚至原生 Web Components）里实现父子组件状态同步，无需依赖 props 或 ref。

为什么不用框架自带的通信机制？

当组件被嵌套在第三方系统（比如 CMS 插件、低代码平台、微前端子应用）中，或需要跨框架复用时，props 和 $emit 会失效。此时 DOM 事件是唯一通用、不绑定运行时的通信通道。

自定义 DOM 事件天然冒泡，可穿透 Shadow DOM 边界（需设 composed: true）
父组件监听 document 或容器节点即可捕获子组件发出的状态变更，无需提前声明 ref 或事件名
子组件只需触发事件，不关心谁监听、是否 Vue/React/Angular，彻底解耦

`triggerEvent` 在 Web Components 中怎么写？

注意：这不是 Vue 的 this.triggerEvent，而是原生 CustomEvent。Web Components（如 Lit、Stencil）必须手动 dispatch：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      const event = new CustomEvent('state-change', {
        detail: { value: 'clicked', timestamp: Date.now() },
        bubbles: true,
        composed: true // 关键！否则无法穿透到父组件宿主节点
      });
      this.dispatchEvent(event);
    });
  }
}

父容器监听时，不能只监听 my-button 元素本身，而应监听其父节点或 document：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

document.addEventListener('state-change', (e) => {
  console.log(e.detail.value); // 'clicked'
});

bubbles: true 让事件向上冒泡
composed: true 是 Web Components 穿透 Shadow DOM 的必要条件，漏掉就收不到
detail 必须是 plain object，不能传函数或 DOM 节点（序列化限制）

Vue 模板里怎么安全发 CustomEvent？

在 Vue 单文件组件的 <template></template> 中，不能直接调用 this.$emit 实现跨框架通信。正确做法是在 mounted 或 onMounted 中绑定原生事件：

onMounted(() => {
  const button = document.querySelector('.my-action-btn');
  if (button) {
    button.addEventListener('click', () => {
      const event = new CustomEvent('ui-action', {
        detail: { action: 'submit', formId: 'login-form' },
        bubbles: true
      });
      button.dispatchEvent(event);
    });
  }
});

父组件（哪怕不是 Vue）只要监听同名事件就能响应：

避免在 @click 指令里直接 dispatchEvent —— Vue 会拦截原生事件，导致冒泡中断
不要用 ref 获取 DOM 后再 dispatch，因为 SSR 渲染时 ref 可能为空；改用 querySelector 或事件委托
事件名建议加前缀（如 app:state-change）防止和浏览器原生事件冲突

React 组件监听时容易忽略的细节

React 默认不支持自定义事件冒泡到根节点，需手动绑定到容器元素：

useEffect(() => {
  const container = document.getElementById('widget-root');
  const handler = (e) => {
    console.log('received:', e.detail);
  };
  container?.addEventListener('ui-action', handler);
  return () => container?.removeEventListener('ui-action', handler);
}, []);