如何向Vaadin中调用的JavaScript文件传递参数？

你的问题核心是：服务器端Java变量num无法直接被浏览器端的JavaScript文件访问，因为两者运行在完全独立的上下文环境中。下面是几种可行的解决方式：

方法1：将JS封装为函数，通过executeJs传参 #

先修改你的JS文件（functparam.js），把逻辑封装成可接收参数的函数：

function showNumber(num) {
  alert('This is a number: ' + num);
}

然后在Java代码中，先加载JS文件，再调用函数并传递参数：

Div myDiv = new Div();
int num = 1000;
// 加载JS文件
UI.getCurrent().getPage().addJavaScript("src/functparam.js", LoadMode.LAZY);
// 调用JS函数，$0代表第一个传入的参数
UI.getCurrent().getPage().executeJs("showNumber($0)", num);
add(myDiv);

方法2：直接用executeJs内嵌JS逻辑（适合简单场景） #

如果JS逻辑不复杂，无需单独文件，直接在Java中通过executeJs传递参数执行：

Div myDiv = new Div();
int num = 1000;
// 直接执行带参数的JS代码，$0对应传入的num值
UI.getCurrent().getPage().executeJs("alert('This is a number: ' + $0)", num);
add(myDiv);

方法3：通过DOM元素属性传递参数 #

将Java变量值绑定到DOM元素的自定义属性上，再让JS读取该属性：
Java代码：

Div myDiv = new Div();
int num = 1000;
// 给Div添加自定义属性存储数值
myDiv.getElement().setAttribute("data-number", String.valueOf(num));
UI.getCurrent().getPage().addJavaScript("src/functparam.js", LoadMode.LAZY);
add(myDiv);

修改JS文件（functparam.js）读取属性：

// 找到目标元素并读取自定义属性
const targetDiv = document.querySelector('div[data-number]');
alert('This is a number: ' + targetDiv.getAttribute('data-number'));

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