Vaadin项目：如何从JS CustomEvent的detail提取数据到Java

问题出在Vaadin默认不会自动将CustomEvent的detail数据传递到Java端，需要显式配置要提取的事件数据路径。

修改后的Java监听器代码： #

getElement().addEventListener("change", e -> {
    // 根据breakLines的实际类型选择对应方法，示例为布尔值
    boolean breakLines = e.getEventData().getBoolean("event.detail");
    System.out.println("change value: " + breakLines);
})
// 关键配置：指定要传递到Java端的事件数据路径
.addEventData("event.detail");

不同数据类型的提取方式： #

• 如果breakLines是字符串类型：

  String breakLines = e.getEventData().getString("event.detail");
  

• 如果detail是包含多属性的复杂对象：

  getElement().addEventListener("change", e -> {
      JsonObject detailObj = e.getEventData().getJsonObject("event.detail");
      boolean breakLines = detailObj.getBoolean("breakLines");
      String otherProp = detailObj.getString("otherProp");
      System.out.println("breakLines: " + breakLines + ", otherProp: " + otherProp);
  })
  .addEventData("event.detail");
  

你的JS代码无需修改，保持原有的事件派发逻辑即可：

this.dispatchEvent(new CustomEvent('change', {detail: this.breakLines, bubbles: true, composed: true}));

内容的提问来源于stack exchange，提问作者chillin.killer