Vaadin 14 下不使用Lit/Polymer实现HTML5 Web Component向服务端传数据

客户端原生JS修改（无需引入Lit/Polymer） #

先修正原有代码的笔误，再补充服务端通信逻辑，完整代码如下：

class SimpleComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<input type="text" id="test"/>';
    this._input = this.querySelector('#test');
    // 输入变更时触发自定义事件发送数据到服务端
    const self = this;
    this._input.onchange = function() {
      self.dispatchEvent(new CustomEvent('value-changed', {
        detail: this.value,
        bubbles: true,
        composed: true
      }));
    }
  }
  // 方法名和服务端调用的保持一致
  setValue(value) {
    this._input.value = value;
  }
}
customElements.define("simple-com",SimpleComponent);

服务端Java代码修改 #

在原有逻辑基础上补充客户端事件监听逻辑，即可拿到前端传递的输入值：

import com.vaadin.flow.component.*;

@Tag("simple-com")
public class SimpleComponent extends Component {
    private String value;

    public SimpleComponent() {
        // 监听前端抛出的value-changed事件
        addEventListener("value-changed", event -> {
            // 从事件参数中获取前端传递的输入值
            this.value = event.getEventData().getString("event.detail");
            // 此处可补充你自己的业务逻辑，比如触发值变更回调
            System.out.println("收到前端传值：" + this.value);
        }).addEventData("event.detail");
    }

    public void setValue(String value) {
        this.value = value;
        getElement().callJsFunction("setValue", value);
    }

    public String getValue() {
        return value;
    }
}

逻辑说明 #

原生Web Component通过CustomEvent抛出携带数据的自定义事件，Vaadin服务端组件直接监听对应事件即可拿到前端传递的参数，全程不需要依赖任何额外前端框架。

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