情況

我正在嘗試使用Vue 的提供和注入功能的選項API，以便header.vue 元件可以向container-nav.vue 元件提供資料（請參閱組件層次結構）。但是，當注入資料時，它在初始載入時是未定義的。

目前元件層次結構：

header.vue > header-nav-menu.vue > 容器-nav.vue

試 1 - header.vue（祖父母）

在此元件中，我從 pinia (storeCommon) 取得 Provide() {} 內的以下字串 '/'。

import { defineComponent } from 'vue' import parentStore from '@/store' export default defineComponent({ setup() { // Should not have access to this.navHome -> undefined (loads before options API) console.log("1. Calling setup in Header") const storeCommon = parentStore() return { storeCommon } }, beforeCreate() { // Should not have access to this.navHome -> undefined (loads before options API) console.log("2. Calling beforeCreate in Header") }, provide() { console.log("3. Calling provide in Header") return { navHome: this.storeCommon.textualData[0]?.navigation.links.home } }, created() { // Should have access to this.navHome -> '/' (loads after options API) console.log("9. Calling beforeCreate in Container Nav: ", this.$refs.navHome) }, mounted() { // Should have access to this.navHome -> '/' (loads after options API) console.log("8. Calling beforeCreate in Container Nav: ", this.$refs.navHome) } })

嘗試 1 - container-nav.vue（子級）

在此組件中，我注入由 header.vue 組件提供的 navHome。

從 'vue' 匯入 {defineComponent } 導出預設定義組件（{ 注入：['navHome']， 設定() { // 不應該造訪 this.navHome ->未定義（在選項 API 之前載入） console.log("4. 在 Container Nav 中呼叫設定") }, 創建之前() { // 不應該造訪 this.navHome ->未定義（在選項 API 之前載入） console.log("5.在Container Nav中呼叫beforeCreate") }, 創建（）{ // 應該可以存取 this.navHome -> '/'（在選項 API 之後載入） console.log("6. 在容器導覽中呼叫 beforeCreate: ", this.$refs.navHome) }, 安裝（）{ // 應該可以存取 this.navHome -> '/'（在選項 API 之後載入） console.log("7. 在容器導覽中呼叫 beforeCreate: ", this.$refs.navHome) } })

嘗試 1 - 測試

使用 console.logs 執行以下程式碼會產生以下結果：

1.呼叫 Header 中的設置 2.在Header中呼叫beforeCreate：undefined ->正確的 3.在Header中呼叫Provide 4. 在Container Nav中呼叫setup 5.Container Nav中調用beforeCreate：undefined ->正確的 6. 在 Container Nav 中建立的呼叫：未定義 ->不正確（應該是“/”） 7.在Container Nav中調用mounted：undefined ->不正確（應該是“/”） 8. 調用mounted在Header中：undefined ->不正確（應該是“/”） 9. Header 中所建立的呼叫：undefined ->不正確（應為“/”）

<小時>>

嘗試2 - header.vue（祖父母）

使用與相同的程式碼和選項 API 之前，除了使用setup和提供。

從 'vue' 匯入 {defineComponent, Provide } 從“@/store”導入parentStore 設定() { // 1.嘗試過這種方式 const navLinkHome = ParentStore().getTextualData[0]?.navigation.links.home const navHome = 提供('navHome', navLinkHome) // 2.嘗試過這種方式 const navHome = Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home) 返回 { // 1 & 2 導航首頁 // 也是這樣 navHome：提供（'navHome'，parentStore（）.getTextualData [0]？.navigation.links.home） } }

嘗試2-container-nav.vue（子級）

從 'vue' 匯入 {defineComponent, Inject } 設定() { const navHome = 注入('navHome') 返回 { 導航首頁 // 也嘗試過，但與上面相同，只是時間更長 導覽首頁： 導覽首頁 } }

嘗試 2 - 測試

使用 console.logs 執行以下程式碼會產生以下結果：

1.呼叫 Header 中的設置 2.在Header中呼叫beforeCreate：undefined ->正確的 3. 在Container Nav中呼叫setup 4.Container Nav中調用beforeCreate：undefined ->正確的 5. 在 Container Nav 中建立的呼叫：未定義 ->不正確（應該是“/”） 6.在Container Nav中調用mounted：undefined ->不正確（應該是“/”） 7. 調用mounted在Header中：undefined ->不正確（應該是“/”） 8. Header 中所建立的呼叫：undefined ->不正確（應為“/”）

混亂

首先，我注意到在 header.vue中使用 provide() {}; Options API 時，並嘗試引用 navHome。我無法在創建或安裝的方法中使用 this.navHome。我會收到一條錯誤訊息，說它在 CreateComponentPublicInstance類型上不存在。為了解決這個問題，我改為使用 this.$refs.navHome- 甚至不確定這是否是正確的做法。
其次，當在container-nav.vue時組件中使用inject: [ 'navHome' ];當時，我無法使用this.navHome訪問它。同樣，我只能使用 this.$refs.navHome 存取它。