从Vue组件中的index.html到达全局窗口变量

Question

如果我有一个这样加载到Vue项目中的Stencil.js组件：

index.html：

IBM DB2 ODBC DRIVER

然后，我想在vue组件中到达顶部栏信息。 像

VueComponent.vue

  <script type="module"
    src="https://xxxxxx.s3-eu-west-1.amazonaws.com/topbar.esm.js">
  </script>

  <script>
    window.addEventListener('topbarLoaded', function (data) {
      window.topbar = data.detail;
      console.log('topbar was loaded and here it is:', window.topbar);
    });
  </script>

所以在这里，我希望从顶部栏中获得的所有内容都可以在Vue组件中访问。 现在，如果我打开Chrome devtools，我可以编写topbar.user并获取user的所有信息，但是我也希望所有vue组件都可以访问此信息。

Answer 1

问题在于TypeScript不知道该属性。您可以通过几种方式解决该问题：

1. 在前一行添加// @ts-ignore。这样可以抑制下一行的错误。
2. 投射到any：(window as any).topbar
在window界面中
3. Define the property：

declare global {
    interface Window { topbar: any; }
}