Vue3组件封装为自定义元素时无法触发事件的问题咨询

第一段代码事件失效的核心原因是：手动封装自定义元素时，未将原Vue组件内部触发的事件转发到自定义元素对外的事件系统中。

原组件内部调用$emit触发的事件仅在自身上下文传递，但你在自定义元素的setup中渲染原组件时，没有把这些事件绑定到自定义元素的emit方法上，导致外部调用方无法接收事件。直接复制appContext的方式能实现插件支持，但缺失事件转发逻辑，这才是事件失效的关键。

需要在渲染原组件时，监听它声明的所有emits事件，再调用自定义元素的emit方法转发这些事件。修改后的代码如下：

import { createApp, defineCustomElement, getCurrentInstance, h } from "vue"

export const defineVueCustomElement = (component: any, { plugins = [] } = {}) =>
  defineCustomElement({
    styles: component.styles,
    props: component.props,
    emits: component.emits,
    setup(props, { emit }) {
      const app = createApp();
      plugins.forEach((plugin) => {
        app.use(plugin);
      });
      const inst = getCurrentInstance();
      Object.assign(inst.appContext, app._context);
      Object.assign(inst.provides, app._context.provides);

      // 构建事件监听对象：将原组件的事件转发到自定义元素的emit
      const eventListeners = {};
      if (component.emits) {
        component.emits.forEach((eventName: string) => {
          // 转换为Vue组件事件监听的驼峰格式（onXxx）
          const listenerName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
          eventListeners[listenerName] = (...args) => emit(eventName, ...args);
        });
      }

      return () =>
        h(component, {
          ...props,
          ...eventListeners // 绑定事件监听
        });
    },
  })

• Vue组件的事件监听采用驼峰式命名（如onMyEvent对应组件内部的my-event或myEvent），因此需要把原组件声明的emits转换为对应的驼峰式监听属性。
• 修正后，原组件内部触发的事件会被转发到自定义元素的emit，外部调用方可以通过原生事件监听（比如addEventListener('my-event', ...)）接收事件，同时保留了插件支持的功能。

内容的提问来源于stack exchange，提问作者Lakeeast