<p><br /></p><h2>状況</h2>
<p><code>header.vue</code> コンポーネントが <code>container-nav.vue</code> にデータを提供できるように、Vue のオプション API を使用して機能を提供および挿入しようとしています。 ; コンポーネント (コンポーネント階層を参照)。ただし、データが注入される場合、初期ロードではデータは未定義になります。 </p>
<p><strong>現在のコンポーネント階層: </strong></p>
<li>header.vue > header-nav-menu.vue >container-nav.vue</li>
</ul>
<h1>試行 1 - header.vue (祖父母)</h1>
<p>このコンポーネントでは、pinia (storeCommon) から <code>Provide() {}</code> 内で次の文字列 <code>'/'</code> を取得します。 </p>
<pre class="brush:php;toolbar:false;">import {defineComponent} from 'vue'
「@/store」からparentStoreをインポートします
デフォルトのエクスポートdefineComponent({
設定（） {
// this.navHome にアクセスすべきではありません -> 未定義 (オプション API の前にロードされます)
console.log("1. ヘッダーでセットアップを呼び出す")
const storeCommon =parentStore()
戻り値 { ストアコモン }
}、
beforeCreate() {
// this.navHome にアクセスすべきではありません -> 未定義 (オプション API の前にロードされます)
console.log("2. ヘッダーのCreateの前に呼び出す")
}、
提供する（） {
console.log("3. ヘッダーでの Provide の呼び出し")
戻る {
navHome: this.storeCommon.textualData[0]?.navigation.links.home
}
}、
作成した（） {
// this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロードされます)
console.log("9. コンテナ Nav での beforeCreate の呼び出し: ", this.$refs.navHome)
}、
マウントされた() {
// this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロードされます)
console.log("8. コンテナ Nav での beforeCreate の呼び出し: ", this.$refs.navHome)
}
})</pre>
<h1>トライ 1 -container-nav.vue (子)</h1>
<p>このコンポーネントでは、<code>header.vue</code> コンポーネントによって提供される <code>navHome</code> を挿入します。</p>
<pre class="brush:php;toolbar:false;">import {defineComponent} from 'vue'
デフォルトのエクスポートdefineComponent({
挿入: [ 'navHome' ],
設定（） {
// this.navHome にはアクセスできません ->未定義 (オプション API の前にロード)
console.log("4. Container Nav でセットアップを呼び出す")
}、
beforeCreate() {
// this.navHome にはアクセスできません ->未定義 (オプション API の前にロード)
console.log("5. Container Nav で Create の前に呼び出す")
}、
作成した（） {
// this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロード)
console.log("6. Container Nav での beforeCreate の呼び出し: ", this.$refs.navHome)
}、
マウントされた() {
// this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロード)
console.log("7. Container Nav での beforeCreate の呼び出し: ", this.$refs.navHome)
}
})</pre>
<h1>尝试 1 - 测试</h1>
<p>console.logs を使用して以下の代償会を実行すると、以下の結果が発生します:</p>
<pre class="brush:php;toolbar:false;">1.ヘッダーでの呼び出し設定
2. ヘッダーでの beforeCreate の呼び出し: 未定義 ->正しい
3. ヘッダーで Provide を呼び出す
4. Container Nav でのセットアップの呼び出し
5. Container Nav での beforeCreate の呼び出し: 未定義 ->正しい
6. Container Nav で作成された呼び出し: 未定義 ->間違っています (「/」である必要があります)
7. Container Nav にマウントされた呼び出し: 未定義 ->間違っています (「/」である必要があります)
8. ヘッダーにマウントされた呼び出し: un 未定義 ->間違っています (「/」である必要があります)
9. ヘッダー内に作成された呼び出し: 未定義 ->間違っています (「/」である必要があります)</pre>
<h1>尝试 2 - header.vue（祖父母）</h1>
<p><code>setup</code>の使用を除き、以前と同じコードと選択 API を使用します。 <code>provide</code>。</p>
<pre class="brush:php;toolbar:false;">import {defineComponent, Provide } from 'vue'
「@/store」からparentStoreをインポートします
設定（） {
// 1. この方法を試しました
const navLinkHome =parentStore().getTextualData[0]?.navigation.links.home
const navHome = Provide('navHome', navLinkHome)
// 2. この方法を試しました
const navHome = Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home)
戻る {
// 1 & 2
ナビホーム
// そして、この方法でも
navHome: Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home)
}
}</pre>
<h1>尝试 2 -container-nav.vue（子级）</h1>
<pre class="brush:php;toolbar:false;">import {defineComponent, inject } from 'vue'
設定（） {
const navHome = inject('navHome')
戻る {
ナビホーム
// これも試しましたが、上記と同じです。
ナビホーム: ナビホーム
}
}</pre>
<h1>尝试 2 - 测试</h1>
<p>console.logs を使用して以下の代償会を実行すると、以下の結果が発生します:</p>
<pre class="brush:php;toolbar:false;">1.ヘッダーでの呼び出し設定
2. ヘッダーでの beforeCreate の呼び出し: 未定義 ->正しい
3. Container Nav でセットアップを呼び出す
4. Container Nav での beforeCreate の呼び出し: 未定義 ->正しい
5. Container Nav で作成された呼び出し: 未定義 ->間違っています (「/」である必要があります)
6. Container Nav にマウントされた呼び出し: un 未定義 ->間違っています (「/」である必要があります)
7. ヘッダーにマウントされた呼び出し: un 未定義 ->間違っています (「/」である必要があります)
8. ヘッダー内に作成された呼び出し: 未定義 ->間違っています (「/」である必要があります)</pre>
<h2> 沈黙</h2>
<li><p>最初に、<code>header.vue</code> に注意しました。中は <code>provide() {}</code> を使用します。オプション API の場合、<code>navHome</code> を参照します。作成またはインストールする方法で <code>this.navHome</code> を使用することはできません。 <code>CreateComponentPublicInstance</code> にある 1 つの条文メッセージを受信しました。この問題を解決するために、<code>this.$refs.navHome</code>を使用するように変更しました。 - これが正しいかどうかさえ判断できません。
</li>
<li><p>今度は、<code>container-nav.vue</code>にあります。パッケージ内で <code>inject を使用しています: [ 'navHome' ]</code>とき、我無法使用<code>this.navHome</code>そうだね。繰り返しますが、<code>this.$refs.navHome</code> を使用してのみアクセスできます。 </p>
</li>
</ul>
<p>しかし。 </p>
<li><code>header.vue</code> のセットアップ メソッドで Provide を使用し、<code>container-nav.vue</code> のセットアップ メソッドで Inject を使用する場合、<code> を使用できます;this.navHome</code> は <code>navHome</code> にアクセスします。なぜこんなことをするのかはわかりません。 </li>
</ul>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
- これはリアクティブなオブジェクトではないため、
- または、次のようなリアクティブ オブジェクトを提供できます:
リーリーparentStore().getTextualData[0]?.navigation.links.homeの値が"/"であることを確認する必要があります。親によるthis.$refs.navHomeは間違った方法です。this.navHomeは機能するはずです。ただし、Composition API スタイル