如何使用Vue Router公開添加到Vue 3中的window object的自定義屬性

Question

我已經通過子組件的 onMounted 掛鈎向客戶端瀏覽器公開了一個添加到 Window object 的自定義屬性。 由於該組件是在 App.vue 組件內呈現的，所以它工作得很好，我能夠從瀏覽器等訪問自定義屬性（一個對象）。但是由於該應用程序需要更多視圖，所以我已經實現了 Vue Router 和視圖，所以我的應用程序呈現的方式不同，現在我正在嘗試找到一種方法來使用新的文件夾結構公開 object：

在實現 vue 路由器之前：

APP.vue模板：

<template>
  <WidgetContainer />
</template>

WidgetContainer 組件 onMounted 生命周期鈎子：

onMounted(async () => {
  window.myWidget = {
    load: retrieveEndUserJWT,
  };
});

然后我可以在 WidgetContainer 方法中做一些事情：

const retrieveEndUserJWT = async (callback) => {
  //do something
};

現在，在實現 Vue 路由器之后，我稍微更改了我的項目結構，因此我有視圖，而不僅僅是功能組件：

所以現在 App.vue 模板看起來是這樣的：

<template>
  <router-view></router-view>
</template>

這樣做的問題是，添加到 Window object (window.myWidget) 的公開自定義屬性永遠不會到達 DOM，因為它位於 WidgetContainer 子組件的 OnMounted 生命周期掛鈎上。 有什么辦法我仍然可以擁有 object 而不會影響我的 widgetContainer 子組件的邏輯？ 也許從那里向 app.vue 組件發出一個事件？

Answer 1

其實答案很簡單。 我只是將新屬性的實現移動到 App.vue 的掛載鈎子，然后從該組件調用子組件方法。

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  window.myWidget = {
    load: retrieveEndUserJWT,
  };
});
const retrieveEndUserJWT = async () => {
  console.log("Hello World");
};
</script>

<template>
  <router-view></router-view>
</template>