Vue エラーを解決する方法: クロスレベルのコンポーネント通信に Provide と Inject を正しく使用できない

Vue エラーの解決方法: クロスレベル コンポーネント通信に Provide と Inject を正しく使用できません

Vue 開発では、クロスレベル コンポーネント間の通信が一般的です。問題の必要性。 Vue は、クロスレベルのコンポーネント通信を実装するために、provide と inject という 2 つの API を提供します。ただし、これら 2 つの API を使用すると、エラーが発生する場合があります。この記事では、Vue エラーの問題 (クロスレベル コンポーネント通信に provide と inject を正しく使用できない) を解決する方法と、対応するコード例を紹介します。

問題の説明

クロスレベルコンポーネント通信に provide と inject を使用すると、次のエラー メッセージが表示される場合があります:

このエラー メッセージは、コンシューマー コンポーネントでよく表示され、必要なインジェクションが見つからないことを示します。通常、このエラーは 2 つの一般的な状況によって発生します。

1. provide によって提供されたキー名が、inject 内の対応するキー名と一致しません。
2. provide指定されたキー名は他のコンポーネントによってオーバーライドされます。

これら 2 つの状況をそれぞれ解決しましょう。

解決策 1: キー名の不一致

provide を使用してデータを提供する場合、これらを受け取るために使用側コンポーネントで inject を使用する必要があります。データ。ただし、キー名が一致しない場合、インジェクションが取得できない事態が発生します。

この問題を解決するには、provide で提供されるキー名が inject の対応するキー名と一致していることを確認する必要があります。以下はサンプル コードです。

// 父组件提供数据
provide() {
  return {
    name: 'John Doe',
    age: 25
  };
}

// 子组件消费数据
inject: ['name', 'age'],

上記のサンプル コードでは、親コンポーネントは 2 つのキー名 name と age を提供し、provide を渡します。 すべてのサブコンポーネントに提供されます。子コンポーネントでは、inject を通じてこれら 2 つのキー名によって提供されるデータを受け取ります。

キー名が一致しない場合、エラー メッセージが表示されます: インジェクション "xxx" が見つかりません。このとき、提供されたキー名と挿入されたキー名が同じかどうかを確認して、一貫性があることを確認する必要があります。

解決策 2: キー名が上書きされる

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 を使用する場合、親コンポーネントのみがデータを提供でき、子コンポーネントがデータを消費できることに注意してください。

この記事が Vue エラーの解決に役立つことを願っています: クロスレベル コンポーネント通信に

provide と inject を正しく使用できません!ご質問がある場合は、公式ドキュメントを確認するか、相談用のメッセージを残してください。

以上がVue エラーを解決する方法: クロスレベルのコンポーネント通信に Provide と Inject を正しく使用できないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。