Stencil自定义事件失效：valueSelected始终为undefined报错

问题 #

在Stencil中实现自定义事件时遇到两个问题：

1. valueSelected 始终为 undefined
2. 调用emit时报错：Cannot read properties of undefined (reading 'emit')

相关代码：

@Event() valueSelected: EventEmitter<string>;

@Listen('selectedOptionValue')
selectedOptionValueFunc() { 
  console.log('event emitted')
}

fireCustomEvent() { 
    console.log(this.valueSelected)
    this.valueSelected.emit('selectedOptionValue')
}

<select onChange={this.fireCustomEvent}></select>

原因分析 #

• this指向错误：直接把fireCustomEvent绑定给select的onChange时，函数执行时的this会指向select元素，而非组件实例，导致this.valueSelected取不到组件定义的事件发射器，自然为undefined。
• 事件名不匹配：你定义的自定义事件是valueSelected，但监听的却是selectedOptionValue，就算修复了this问题，监听函数也不会触发；另外emit时传递的参数应该是要传递的数据，而非事件名。

解决方法 #

1. 修复this指向，三种可选方式：

   • 用箭头函数包裹调用：

     <select onChange={() => this.fireCustomEvent()}></select>
     

   • 在构造函数中绑定this：

     constructor() {
       this.fireCustomEvent = this.fireCustomEvent.bind(this);
     }
     

   • 将fireCustomEvent定义为箭头函数：

     fireCustomEvent = () => { 
       console.log(this.valueSelected)
       this.valueSelected.emit('需要传递的实际数据')
     }
     

2. 修正事件监听与触发的对应关系：
   Stencil会自动将驼峰命名的事件转为短横线命名（valueSelected → value-selected），所以监听时要对应正确的事件名：

   // 监听自动转换后的DOM事件名
   @Listen('value-selected')
   selectedOptionValueFunc(event: CustomEvent<string>) { 
     console.log('event emitted', event.detail)
   }
   

   如果想保留驼峰事件名，需要在@Event装饰器中显式配置：

   @Event({ eventName: 'valueSelected' }) valueSelected: EventEmitter<string>;
   
   @Listen('valueSelected')
   selectedOptionValueFunc(event: CustomEvent<string>) { 
     console.log('event emitted', event.detail)
   }
   

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