Vaadin自定义组件：如何持久访问初始化的JavaScript变量bp

要在Vaadin组件中持续访问JavaScript里初始化的bp对象，核心是把这个对象绑定到组件对应的DOM元素上，避免局部变量无法跨调用访问的问题。具体修改如下：

关键修改点 #

• 初始化时将bp赋值给组件元素的属性，而非局部变量
• 确保传入L.browserPrint的参数是正确的JS对象（而非字符串）

修改后的代码 #

@NpmPackage(value = "leaflet.browser.print", version = "2.0.2")
@JsModule("leaflet.browser.print/dist/leaflet.browser.print.min.js")
public class LBrowserPrintImport extends Component {

    private static final long serialVersionUID = 1L;
    
    public LBrowserPrintImport(
            final LMap map,
            final LBackendOptions backendOptions
            ) {
        super();
        // 将bp绑定到组件元素的属性上，而非局部变量
        getElement().executeJs("this.bp = L.browserPrint($0, $1);", 
            map.getElement(), // 传入Leaflet地图的DOM元素
            backendOptions);  // 直接传入配置对象（Vaadin会自动序列化为JS对象）
    }
    
    public void print() {
        // 通过组件元素的属性访问bp对象并调用方法
        getElement().executeJs("this.bp.print(L.BrowserPrint.Mode.Landscape());");
    }
}

原理说明 #

• 在executeJs中，this指向当前组件对应的DOM元素，把bp赋值给this.bp后，这个对象会和组件实例绑定，不会被垃圾回收
• 后续调用print()方法时，通过this.bp就能直接访问到之前初始化的对象，无需重新创建

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