从 Vue 组件中的 index.html 获取全局 window 变量

Question

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

index.html:

  <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 组件中访问顶部栏信息。像

VueComponent.vue

<script lang="ts">
   import { Component, Prop, Vue } from "vue-property-decorator";

   @Component({
     name: 'testcomp'
   })
   export default class PodList extends Vue {
      data() {
         return {
            topbar: window.topbar // Error: Property 'topbar' does not exist on type 'Window & typeof globalThis'
         }
      }
   }
</script>

所以在这里我希望我的顶部栏中的所有内容都可以在我的 Vue 组件中访问。就像现在一样，如果我打开 Chrome devtools 我可以写 topbar.user 并获取用户的所有信息，但我也希望所有 vue 组件都可以访问这些信息。

Answer 1

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

在上一行添加// @ts-ignore。这会抑制下一行的错误。
转换为 any：(window as any).topbar
Define the property在window界面：

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

从 Vue 组件中的 index.html 获取全局 window 变量

Reach global window variable from index.html in a Vue component

typescript

vue.js

stenciljs