Stencil开发Web Component时EventEmitter触发后接收值为undefined问题

Stencil 的 EventEmitter.emit() 方法传递的参数，会遵循原生自定义事件规范，默认挂载到事件对象的 detail 属性上。你当前读取的 ev.target.value 并不存在：ev.target 指向的是你封装的 navigation 组件本身，你没有为组件设置 value 属性，所以输出为 undefined。

直接修改父组件的事件回调，从 detail 字段取值即可：

onChange(ev: any) {
    console.log('got data', ev.detail); // 此处即可正常输出你emit的item.Name
}

你示例中父组件调用时的[dataNavigation]属性绑定、(newModuleClicked)事件绑定语法是 Angular 框架的用法，如果你确实是在 React 项目中使用该 Stencil 组件，需要注意：

• React 不支持直接用小括号语法绑定自定义 Web Component 的事件，你需要通过 ref 获取组件实例后调用 addEventListener 绑定事件，或者使用 Stencil 官方提供的 @stencil/react-output-target 工具生成 React 适配的包装组件，避免事件绑定失效。

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