VUEでは、階層コンポーネントにデータを直接渡すための機能と噴射が提供されます。親コンポーネントは、提供を通じてデータまたはメソッドを提供し、子孫コンポーネントを直接注入し、レイヤーでプロップレイヤーを渡さずにこれらのデータまたはメソッドを注入して使用します。 2。トピック、ユーザーステータス、APIサービスなどのグローバルまたは共有データの合格など、「プロップ掘削」を避けるのに適しています。 3。使用する場合の注意：非応答性のある元の値を応答性のあるオブジェクトに包み、レスポンシブな更新を?qū)g現(xiàn)する必要があり、保守性に影響を與えることを避けるために亂用しないでください。

Vueでは、 provideとinject一般に「プロップ掘削」を回避するものと呼ばれるすべてのレベルでプロップを手動で渡すことなく、コンポーネントツリーにデータを渡す方法を提供します。この機能は、共有データまたはメソッドへのアクセスが必要な深くネストされたコンポーネントを扱う場合に特に便利です。

VUEに何が提供され、注入されていますか？

彼らのコアで、このような作業(yè)provide 、 inject ：

• 親コンポーネントが使用して、特定のデータまたはメソッドをその子孫のいずれかが利用できるようにprovide 。
• その後、すべての子供（または深くネストされた）コンポーネントは、すべての中間層をスキップして、そのデータまたはメソッドに直接アクセスするためにinjectを使用できます。

これは利便性だけではありません。特に、ユーザーの設(shè)定、テーマ、APIサービスなど、多くのレベルで必要な値がある場合、特にクリーンなコードと保守性の向上に関するものです。

小道具の代わりに、いつ提供/注入する必要がありますか？

次の場合を使用provideてinject

• あなたは自分が同じ小道具を複數(shù)の無関係なコンポーネントに通していることに気付いています。
• データは、単一のコンポーネントの範囲に結(jié)び付けられていないグローバルな設(shè)定またはサービスのようなものです。
• プラグインやテーマ構(gòu)成など、いくつかの共有コンテキストにアクセスする必要がある可能性のある再利用可能なコンポーネントを構(gòu)築しています。

たとえば、いくつかのコンポーネントが現(xiàn)在のテーマを知る必要があるUIライブラリを構(gòu)築していると想像してください。テーマをトップレベルのアプリコンポーネントから各個々のボタンまたは入力フィールドまでプロップとして渡す代わりに、テーマを1回provide 、必要な場所にinjectことができます。

いくつかの一般的なケースには以下が含まれます。

• ユーザー認証ステータスを渡す
• ユーティリティ機能またはサービス（APIクライアントなど）の共有
• レイアウトまたはUI関連狀態(tài)の管理（例：サイドバーオープン/クローズ）

実際にどのようにセットアップしますか？

セットアップのprovideとinject簡単です：

親コンポーネントで：

デフォルトのエクスポート{
  提供する（） {
    戻る {
      テーマ：「ダーク」、
      updateTheem：this.changetheem
    };
  }、
  方法：{
    changetheme（newtheme）{
      //テーマを変更するロジック
    }
  }
};

子供（または深くネストされた）コンポーネント：

デフォルトのエクスポート{
  注入：['テーマ'、 'updateTheeme']、
  テンプレート： `
    <ボタン @click = "updateTheeme（ &#39;light&#39;）">ライトテーマに切り替えます</button>
  `
};

いくつかの重要なメモ：

• 提供された値は、プリミティブタイプである場合、デフォルトではリアクティブではありません。リアクティブが必要な場合は、それらをリアクティブオブジェクトに包むか、REF/リアクティブ値を使用してください。
• すべてのデータに対してこれを使いすぎないでください。明確な所有権なしであまりにも多くのものが注入されている場合、アプリがデバッグするのを難しくすることができます。
• 小規(guī)模なアプリまたは特定のユースケースのVuex/Piniaの軽量な代替品と考えてください。

気をつけるための一つのゴッチャ

人々がしばしば忘れていることの1つは、明示的にそれらを作成しない限り、デフォルトでバインディングprovide/injectことはリアクティブではないということです。たとえば、単純な文字列provide 、後で親に変更した場合、注入された値は子供に自動的に更新されません。それを修正するには、リアクティブオブジェクトにラップできます。

提供する（） {
  戻る {
    テーマ：Reactive（{Mode： 'Dark'}）
  };
}

これで、 theme.modeどこにでも変更すると、注入されたバージョンがその変更を反映します。

基本的に、それは、遠くのコンポーネント間でデータを清潔で管理しやすい方法で直接共有できるようにすることにより、小道具の掘削を避けるのに役立つものをprovide 、 inject方法です。

以上がVUEでの小道具掘削なしに、提供および挿入により、どのようにして深いコンポーネント通信が可能になりますか？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。