Vue エラー: 依存関係の注入に Provide と Inject を正しく使用できません。解決方法は?

Vue エラー: 依存関係の注入に Provide と Inject を正しく使用できません。解決方法は?

Vue の開発プロセスでは、コンポーネント間でデータやメソッドを共有する必要があることがよくあります。 Vue は、コンポーネント通信を実装するための複数の方法を提供します。そのうちの 1 つは、provide と inject による依存関係の注入です。ただし、依存関係の注入に Provide と Inject を使用すると、エラーが発生することがあります。この記事では、これらの問題の解決策について説明します。

1. エラー メッセージ

コンポーネントで Provide を使用してデータを提供し、サブコンポーネントで Inject を使用してデータを受信すると、次のエラー メッセージが表示されることがあります。表示:

[Vue warn]: The inject key "xxx" is already provided in xxx

このエラー メッセージは、同じコンポーネント内で同じキー名を複数回指定したことを意味します。

2. 解決策

上記のエラー メッセージが表示された場合は、次の 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 サイトの他の関連記事を参照してください。