从 HTML 中的 JavaScript 模块调用函数答案

【问题标题】：Call function from JavaScript module in HTML从 HTML 中的 JavaScript 模块调用函数
【发布时间】：2019-11-02 11:31:11
【问题描述】：

说，我有以下使用 Vue 的 JavaScript 模块：

import Vue from "./vue/vue.esm.browser.js";

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!',
    }
});

// Custom function for calling by the button
function changeMessage() {
    app.message = 'Hello from button!';
}

现在我指的是这个模块：

<script src="js/site.js" type="module"></script>

然后我尝试拨打changeMessage：

<button onclick="changeMessage();">Press me</button>

但是，我在控制台中收到以下错误：

未捕获的 ReferenceError：在 HTMLButtonElement.onclick 中未定义 changeMessage

此外，在 Visual Studio 中，我什至无法在 IntelliSense 中获得它。当我删除type="module" 时，一切正常。如何让html看到模块功能？

【问题讨论】：

查看模块导入/导出。
@MarsAndBack 你能说得更具体点吗？
正如@MarsAndBack 所说，您需要了解如何导出该函数并在需要时导入。更多关于这个stackoverflow.com/questions/49338193/…

标签： javascript vue.js

【解决方案1】：

你可以在全局window对象上定义函数：

<script type="module">

  window.greet = function () {
    alert('Hello')
  }

</script>

<button onclick="greet()">Hello</button>

【讨论】：

我已经更新了我的答案以演示它应该如何工作。如果它对您不起作用，那么您肯定在做其他事情。可以包含一个 sn-p 吗？
你不会相信，但如果我将文件 site.js 重命名为其他名称（例如，site2.js），那么代码就可以工作了！名字site.js有特殊含义吗？
我发现这种行为是由于浏览器缓存造成的。我只是看了一下浏览器加载的 JS 文件 - 它是过时的文件。就是这样！ ?
无论如何，如果你真的想使用模块，你仍然应该学习导入/导出。