Typescript 如何在Vaadin14 WebComponent中的CustomEvent上添加EventListener

我想创建一个web组件，使用Vaadin 14的组件。 我尝试将一个函数绑定到CustomEvent已更改的选定值，但我不知道它是如何工作的

我试过：

import '@vaadin/vaadin-list-box'
...
<vaadin-list-box onSelectedValuesChange={this.foo} multiple>
...
</vaadin-list-box>

导入'@vaadin/vaadin列表框'
...
...

我不熟悉StencilJs库，因此不确定下面的解决方案是否直接适用，但在polymer template中，您可以执行以下操作：

ready（）{
super.ready（）；
var divValue=this.shadowRoot.querySelector（“输出”）；
this.shadowRoot.querySelector（“#vlb”）.addEventListener（'selected-values-changed'，函数（事件）{
console.log（此.selectedValues）；
divValue.innerText=this.selectedValues+“第一项：”+
this.items[this.selectedValues[0]].value；
});

完整的例子是：

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
导入“@vaadin/vaadin list box/vaadin list box.js”；
/**
*`列表框视图`
*
*ListboxView元素。
*
*@customElement
*@聚合物
*/
类ListboxView扩展了聚合关系{
静态获取模板（）{
返回html`
：主持人{
显示：块；
}
报读语文课程
芬兰语
瑞典的

西班牙语（不提供）
英语
选定值：
`;
}
静态get是（）{
返回“列表框视图”；
}
就绪（）{
super.ready（）；
var divValue=this.shadowRoot.querySelector（“输出”）；
this.shadowRoot.querySelector（“#vlb”）.addEventListener（'selected-values-changed'，函数（事件）{
console.log（此.selectedValues）；
divValue.innerText=this.selectedValues+“第一项：”+this.items[this.selectedValues[0]].value；
});
}
静态获取属性（）{
返回{
//在这里申报你的财产。
};
}
}
定义（ListboxView.is，ListboxView）；

注释：

---

返回一个索引数组，因此如果需要，您需要自己提取名称。

不确定，但可能只是输入错误？

onSelectedValuesChanged

，末尾带有

d

，否则您可以尝试

document.querySelector（'vaadin-list-box'）.addEventListener（'selected-values-changed'，console.log）

？我终于在

componentDidLoad（）

中使用了

addEventListener

及其工作。谢谢，但是我在

componentDidLoad

生命周期方法中绑定了CustomEvent。