Vue で Provide/Inject を使用して、祖先と子孫の複数のレイヤーにデータを渡す方法

Vue は、効率的なデータ転送方法であるプロバイド/インジェクトを提供します。これにより、複数のレイヤーにわたる祖先と子孫の間でデータを転送し、面倒な props の転送を回避できます。この記事では、Vue で Provide/Inject を使用して、祖先と子孫の複数のレイヤーにわたるデータ転送を実現する方法を紹介します。

1. Provide と inject

provide と inject は、Vue2.2.0 バージョン以降の新しい API で、マルチレイヤー コンポーネント間のデータ転送を実現するために使用されます。 Provide を使用すると、コンポーネントはそのすべての子孫コンポーネントに依存関係を注入でき、Inject はこの依存関係を受け取って使用できます。

provide と inject は、主に element-ui などの上位プラグイン/コンポーネント ライブラリに使用されます。 element-ui では、そのコンポーネントはすべてトップレベルのコンポーネント ライブラリに依存します。このコンポーネント ライブラリは、すべてのサブコンポーネントにいくつかのパブリック変数とメソッドを提供する必要があります。これらのデータの転送には、Provide と Inject が使用されます。

2. Provide と inject の使用

コンポーネント内で Provide を使用すると、子コンポーネントにインジェクション ポイントを提供できるため、子コンポーネントは親コンポーネントによって提供されるデータを取得できます。例:

// 父组件
export default {
  provide () {
    return {
      theme: this.theme
    }
  },
  data () {
    return {
      theme: 'light'
    }
  }
}

// 子组件
export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

上の例では、親コンポーネントは、provide を使用してデータを提供し、データ オブジェクトを子孫コンポーネントに公開します。ここでのデータは文字列型です。 Provideの方法はprovide関数を使うことになりますが、provideの公式ドキュメントによれば、この関数の戻り値はオブジェクトとなっています。オブジェクト内のキーは子孫を注入するときに使用でき、値は注入されるデータであり、変数や関数などにすることができます。

子コンポーネントで挿入を使用すると、親コンポーネントから提供されるデータを受け取ることができます。例:

export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

この例では、子コンポーネントはコンポーネント オプションの挿入オプションを使用してデータを受信します。 「inject: [key]」 ここで、key は親コンポーネントで公開されるデータ オブジェクトのキーです。ここでのキーは、provide 関数によって提供されるキーと一致します。デフォルトでは、依存関係は親で検索されることに注意してください。親で検索したくない場合は、inject の srcoll を false に設定する必要があります。子コンポーネントは、親コンポーネントによって提供されるデータのみを挿入できます。

3.provide と inject に関する注意事項

1. provide によって挿入されたデータは、子孫コンポーネントで使用できますが、その親コン​​ポーネントでは使用できません。

provideとinjectの仕組みでは、provideで提供されたデータをinjectで子孫コンポーネントに注入することができます。ただし、データを受信するために親コンポーネントでも inject が使用されている場合、inject はデフォルトで親コンポーネントで提供されたデータを検索し、Vue は子孫との一貫性を保つために親コンポーネントを検索しないため、効果はありません。コンポーネントを提供します。

2. データを返すために、provide でアロー関数を使用しないでください。

provide はデータを提供するためにオブジェクトを返す必要があるため、オブジェクトを返すためにアロー関数をよく使用します。例:

export default {
  provide: () => ({
    theme: 'light'
  })
}

ただし、ほとんどの場合、アローは使用しません。アロー関数はこれを指していないため、データを提供する関数。 Provide でアロー関数を使用すると、正しいコンテキストが取得されず、データの変更に応答しません。

3. provide および inject で $ 記号で始まる名前を使用することはお勧めできません。

Provide および Inject の $ 記号で始まる名前付けは、Vue によって予約された命名規則であるため、提供されたデータの開始に $ 記号を使用することはお勧めしません。 Provide で $ 記号で始まる名前を使用すると、いくつかの問題が発生する可能性がありますが、inject で $ 記号で始まる名前を使用すると無視されます。

4. 使用シナリオ

provide/inject の主な目的は、コンポーネント レベル全体にわたるコンポーネント ライブラリを構築することです。具体的には、複数のコンポーネントがテーマの色や言語など、同じ情報やステータスの一部を共有します。

実際の開発プロセスでは、シナリオが簡単に想像できます: アプリまたはページには、多くの同様のコンポーネントが存在する可能性があります。これらのコンポーネントは同じ状態またはメソッドを使用する必要があります。provide /inject を使用できます。これらの共有情報とステータスをレベル間で受け渡し、冗長なコードと作業の重複を回避します。

同時に、ミックスインを使用してコードの重複や冗長性を回避し、コードをエレガントでクリーンで保守しやすくすることもできます。

5. 概要

provide/inject の使用は効率的なデータ転送方法であり、祖先と子孫の複数のレイヤーにわたるデータ転送を実現し、props の使用を減らすのに役立ちます。ただし、provide/inject を使用する場合は、コンポーネントのパフォーマンスと正確さに影響を与えないようにするために、いくつかの注意事項に従う必要があることに注意してください。同時に、実際のアプリケーションでは、シナリオの詳細な分析と、データ転送のための Provide/Inject、props、または vuex の合理的な使用が必要です。

以上がVue で Provide/Inject を使用して、祖先と子孫の複数のレイヤーにデータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。