Vue.jsでは、提供および注入を使用して、深いネストされたコンポーネントのデータ配信の問題を解決し、レイヤーごとに渡されるプロップを避けます。 1。親コンポーネントがデータまたはメソッドをリモートチャイルドコンポーネントに渡す必要がある場合に使用します。 2。親コンポーネントに応答性のあるデータまたは関數(shù)を提供して、REFまたはリアクティブが応答性を維持することを確認(rèn)します。 3.子供のコンポーネントは、注入を通じて必要な値を注入し、注射の故障を防ぐためにデフォルト値を設(shè)定できます。 4.競合の命名を避けるために、シンボルを注入キーとして使用することをお?jiǎng)幛幛筏蓼埂?5.フォーム、トピック、その他のシナリオに適していますが、PINIAなどのグローバルな國家管理に取って代わるべきではありません。適切に使用すると、コンポーネントツリーがより明確かつ維持されやすくなります。

Vue.jsでは、 provideおよびinject 、すべてのレベル（「プロップ掘削」とも呼ばれる）を手動(dòng)で渡すことなく、深くネストされたコンポーネントを渡すための強(qiáng)力なツールです。このパターンは、特定のデータまたはメソッドへのアクセスが必要な深くネストされたコンポーネントが少ない大きなコンポーネントツリーで特に役立ちます。

provide inject使用方法は次のとおりです。

what供給と噴射を使用する時(shí)期

次の場合を使用provideてinject

• 遠(yuǎn)くの子コンポーネントが使用するデータまたは機(jī)能を保持する親コンポーネントがあります。
• データを必要としない中間コンポーネントに小道具を渡すことを避けたいです。
• 再利用可能なコンポーネントライブラリまたは複雑なUI（モーダル、フォーム、テーマなど）を構(gòu)築しています。

注：これは、PINIAのような國家管理の完全な代替品ではありませんが、スコープされた階層通信に最適です。

？親コンポーネントにprovideを使用します

provideオプションにより、親コンポーネントがコンポーネントサブツリー全體でデータまたはメソッドを使用できるようにすることができます。

 // parentComponent.vue
<スクリプトのセットアップ>
&#39;vue&#39;から{detween、ref}をimport

const theme = ref（ &#39;dark&#39;）
const updateUser =（user）=> {
  //ユーザーを更新するロジック
}

//子孫に値を提供します
提供する（「テーマ」、テーマ）
供給（ &#39;updateUser&#39;、updateUser）
</script>

あなたは提供することができます：

• リアクティブ値（ ref 、 reactiveを使用）
• 関數(shù)
• プレーンオブジェクトまたはプリミティブ

？反応性を維持するには、 refまたはreactiveを使用してください。平易な値を提供する場合、変更は下流に反映されません。

？子供のコンポーネントにinjectを使用します

すべての子孫コンポーネント（どんなに深くても）を使用して、指定された値にアクセスinjectます。

 // deepchildcomponent.vue
<スクリプトのセットアップ>
「Vue」から{Inject}をインポートします

//値を注入します
const theme = inject（ &#39;theme&#39;）
const updateUser = inject（ &#39;updateUser&#39;）

//これでそれらを使用できます
console.log（theme.value）// &#39;dark&#39;
</script>

<テンプレート>
  <div：class = "theme">
    <button @click = "updateUser（{name： &#39;alice&#39;}）">ユーザーを更新</button>
  </div>
</テンプレート>

？デフォルト値を提供する（オプション）

値が提供されない場合は、デフォルトを指定できます。

 const theme = inject（ 'theme'、 'light'）//デフォルト「ライト」

これは、注入が失敗したときにエラーを防ぐのに役立ちます。

？反応性を確保します

リアクティブプリミティブ（文字列や數(shù)字など）を提供したい場合は、 refに包みます。

 const count = ref（0）
提供する（ 'count'、count）

それから子供の中で：

 const count = inject（ 'count'）
// count.Valueを使用すると、リアクティブなままになります

必要に応じて子供から変更することもできます（ただし、直接的な突然変異には注意してください）。

？実用的な例：フォームコンポーネント

一般的な現(xiàn)実世界のユースケースは、複數(shù)のネストされた入力が共有狀態(tài)へのアクセスを必要とするフォームです。

 // form.vue
<スクリプトのセットアップ>
&#39;vue&#39;から{detween、ref}をimport

const formdata = ref（{}）
const setfield =（key、value）=> {
  formdata.value [key] = value
}

供給（ &#39;formdata&#39;、formdata）
提供（ &#39;Setfield&#39;、Setfield）
</script>

 // nestedinput.vue
<スクリプトのセットアップ>
「Vue」から{Inject}をインポートします

const formdata = inject（ &#39;formdata&#39;）
const setfield = inject（ &#39;setfield&#39;）

const update =（e）=> {
  setfield（ &#39;username&#39;、e.target.value）
}
</script>

<テンプレート>
  <input：value = "formdata.username" @input = "update" />
</テンプレート>

NestedInput Form內(nèi)のどこでも機(jī)能します - 小道具は必要ありません！

??ベストプラクティスと注意

• 使いすぎないでください：データフローを追跡しにくくすることができます。必要な場合にのみ使用してください。

• 名前の衝突：シンボルまたはユニークな文字列を大規(guī)模なアプリの注入キーとして使用します。

   const themekey = symbol（）
  提供する（themekey、 'dark'）
  const theme = Inject（thememey）

• 明示的に設(shè)計(jì)されていない限り、提供されたデータを直接変化させないでください。変更を処理するために、注入関數(shù)を好みます。

• 複雑なグローバル狀態(tài)については、代わりにピニアを検討してください。

---

基本的に、 provideとinject 、VUEの「スコープ依存性噴射」システムのようなものです。これは、シンプルで効果的で、親から向かいのコミュニケーションに最適です。それらを賢く使用すると、コンポーネントツリーは清潔で保守可能なままです。

以上がディープコンポーネント通信のために提供して注入する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。