ホームページ > 記事 > ウェブフロントエンド > Vue エラー: 依存関係の注入に Provide と Inject を正しく使用できません。解決方法は?
Vue エラー: 依存関係の注入に Provide と Inject を正しく使用できません。解決方法は?
Vue の開発プロセスでは、コンポーネント間でデータやメソッドを共有する必要があることがよくあります。 Vue は、コンポーネント通信を実装するための複数の方法を提供します。そのうちの 1 つは、provide と inject による依存関係の注入です。ただし、依存関係の注入に Provide と Inject を使用すると、エラーが発生することがあります。この記事では、これらの問題の解決策について説明します。
コンポーネントで Provide を使用してデータを提供し、サブコンポーネントで Inject を使用してデータを受信すると、次のエラー メッセージが表示されることがあります。表示:
[Vue warn]: The inject key "xxx" is already provided in xxx
このエラー メッセージは、同じコンポーネント内で同じキー名を複数回指定したことを意味します。
上記のエラー メッセージが表示された場合は、次の 2 つの方法で解決できます。
方法 1: 指定された場所を確認する
まず、指定された場所が正しいかどうかを確認する必要があります。提供されるデータ プロバイダーは親コンポーネントである必要があり、祖先コンポーネントでのみ使用できます。 Provide の場所が間違っている場合 (子コンポーネントまたは兄弟コンポーネントでデータを提供するために Provide を使用する場合など)、エラーが報告されます。
方法 2: 同じキー名を繰り返し指定しないようにする
同じコンポーネント内で、同じキー名を複数回指定することはできません。上記のエラー メッセージが表示された場合は、次の 2 つの方法で解決できます。
2.1 別のキー名を使用する
データを提供するコンポーネントでデータを提供するために、別のキー名を使用できます。 。たとえば、次はデータを提供するコンポーネントです:
// 提供数据的组件 export default { provide() { return { foo: 'bar' } }, // ... }
そして、データを受信するコンポーネントでは、受信に別のキー名が使用されます:
// 接收数据的组件 export default { inject: { baz: { from: 'foo' } }, // ... }
上記の方法により、同じ コンポーネント内で同じキー名を複数回指定する問題。
2.2 関数コンポーネントの使用
Vue の関数コンポーネントは、依存関係注入を実装するための簡潔な方法を提供し、同じキー名を繰り返し指定する問題を回避します。機能コンポーネントでは、キー名を繰り返し指定することを気にせずに、依存関係の注入に Provide と Inject を直接使用できます。以下は、機能コンポーネントを使用して依存関係注入を実装する例です。
// 函数式组件 export default Vue.extend({ functional: true, provide() { return { foo: 'bar' } }, inject: ['foo'], // ... })
上記の方法により、依存関係注入に Provide と Inject を使用するときにキー名を繰り返し指定する問題を解決します。
概要:
Vue では、依存関係の注入に Provide と Inject を使用することは、コンポーネント通信の非常に便利な方法です。ただし、使用中にエラーメッセージが表示されることがあります。この記事では、provide の場所を確認することと、同じキー名を繰り返し指定しないことの 2 つの方法を使用して、これらのエラー メッセージを解決します。この記事が、依存関係注入に Provide と Inject を使用する際の問題の解決に役立つことを願っています。
以上がVue エラー: 依存関係の注入に Provide と Inject を正しく使用できません。解決方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。