ホームページ > 記事 > ウェブフロントエンド > Vue エラーを解決する方法: クロスレベルのコンポーネント通信に Provide と Inject を正しく使用できない
Vue エラーの解決方法: クロスレベル コンポーネント通信に Provide と Inject を正しく使用できません
Vue 開発では、クロスレベル コンポーネント間の通信が一般的です。問題の必要性。 Vue は、クロスレベルのコンポーネント通信を実装するために、provide
と inject
という 2 つの API を提供します。ただし、これら 2 つの API を使用すると、エラーが発生する場合があります。この記事では、Vue エラーの問題 (クロスレベル コンポーネント通信に provide
と inject
を正しく使用できない) を解決する方法と、対応するコード例を紹介します。
クロスレベルコンポーネント通信に provide
と inject
を使用すると、次のエラー メッセージが表示される場合があります:
このエラー メッセージは、コンシューマー コンポーネントでよく表示され、必要なインジェクションが見つからないことを示します。通常、このエラーは 2 つの一般的な状況によって発生します。
provide
によって提供されたキー名が、inject
内の対応するキー名と一致しません。 provide
指定されたキー名は他のコンポーネントによってオーバーライドされます。 これら 2 つの状況をそれぞれ解決しましょう。
provide
を使用してデータを提供する場合、これらを受け取るために使用側コンポーネントで inject
を使用する必要があります。データ。ただし、キー名が一致しない場合、インジェクションが取得できない事態が発生します。
この問題を解決するには、provide
で提供されるキー名が inject
の対応するキー名と一致していることを確認する必要があります。以下はサンプル コードです。
// 父组件提供数据 provide() { return { name: 'John Doe', age: 25 }; } // 子组件消费数据 inject: ['name', 'age'],
上記のサンプル コードでは、親コンポーネントは 2 つのキー名 name
と age
を提供し、provide を渡します。
すべてのサブコンポーネントに提供されます。子コンポーネントでは、inject
を通じてこれら 2 つのキー名によって提供されるデータを受け取ります。
キー名が一致しない場合、エラー メッセージが表示されます: インジェクション "xxx" が見つかりません
。このとき、提供されたキー名と挿入されたキー名が同じかどうかを確認して、一貫性があることを確認する必要があります。
Vue アプリケーションでは、複数の Provide/Inject 使用シナリオが存在する可能性があります。誤って同じキー名を再利用すると、キー名が上書きされます。この方法では、以前に提供されたデータをコンポーネントに正しく挿入できません。
この問題を解決するには、各プロバイダが一意のキー名を持つようにする必要があります。以下はサンプル コードです。
// 父组件提供数据 provide() { return { name: 'John Doe', age: 25 }; } // 子组件1提供数据,键名为job provide() { return { job: 'developer' }; } // 子组件2消费数据 inject: ['name', 'age', 'job'],
上記のサンプル コードでは、親コンポーネントは 2 つのキー名 name
と age
を提供し、子コンポーネント 1 は # を提供します。 ##jobキー名。サブコンポーネント 2 で
inject を使用して、これら 3 つのキー名によって提供されるデータを受け取ります。
Injection "xxx" not found」というエラーも表示されます。このとき、各プロバイダーのキー名が重複しているかどうかを確認して、各キー名が一意であることを確認する必要があります。
provide と
inject を正しく使用できないという問題を解決できます。 。指定されたキー名が挿入されたキー名と一致し、各プロバイダーが一意のキー名を持つことを確認してください。
provide と
inject を使用する場合、親コンポーネントのみがデータを提供でき、子コンポーネントがデータを消費できることに注意してください。
provide と
inject を正しく使用できません!ご質問がある場合は、公式ドキュメントを確認するか、相談用のメッセージを残してください。
以上がVue エラーを解決する方法: クロスレベルのコンポーネント通信に Provide と Inject を正しく使用できないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。