Vue の Provide & Inject とは何ですか?またその使用方法は何ですか?

Vue.js は、現在のフロントエンドの世界で非常に人気のある JavaScript フレームワークであり、応答性の高いデータ バインディング、コンポーネント化されたビュー アーキテクチャ、依存関係の追跡、テンプレートのレンダリングなど、多くの優れた機能を備えています。最も一般的に使用される機能はコンポーネント プログラミングです。Vue では、コンポーネントの登録、コンポーネントのパラメーターの受け渡しなどの機能テストが提供されます。ただし、場合によっては、コンポーネント データの送信でより困難な問題が発生することがあります。現時点では、 を使用できます。この種の問題を解決するには、Vue で提供される provide と inject を使用します。

provide と inject について理解する

provide

Vue2.2.0 バージョンには provide / inject が追加されており、オブジェクト指向プログラミングのニーズを満たすのに役立ちます。 。平たく言えば、provide は、親コンポーネントでデータを提供し、子コンポーネントで inject を使用して必要なデータを取得するプロセスです。

理解を深めるために例を示します。 provide:

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

親コンポーネントで、キー foo を使用してキーを提供します。データは次のようになります。サブコンポーネントに。次に、サブコンポーネントで inject を通じてこのデータを取得できます。

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

この時点で、プロビジョニングと注入の完全なプロセスが実装されました。 provide を通じて親コンポーネントでデータを提供し、子コンポーネントで inject を使用してデータを取得することで、コンポーネント間のデータ転送が完了します。

inject

inject は配列であり、注入されるプロパティ名はリストで宣言されます。サブコンポーネントにオブジェクトを挿入します。オブジェクトのプロパティ名は指定されたキー名と同じで、その値は指定されたデータです。

inject:

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

を理解するための具体的な例を示します。 上記のコードでは、provide 関数は、次の機能を提供する親コンポーネントとして理解できます。下位サブコンポーネントのデータを受け取ると、サブコンポーネントは inject を通じてこのデータを受信し、データ送信プロセスを実現します。

使用シナリオ

この時点で、親コンポーネントと子コンポーネントの間で props 通信がすでに行われているのに、なぜ provide/inject が必要なのかと疑問に思うかもしれません。

実際、この 2 つは使用シナリオにおいては同じではありません。以下に、provide/inject を使用して親子コンポーネント通信を実装できるシナリオをいくつか示します。

1. クロスレベル コンポーネント間の通信

Vue では、親コンポーネントと子コンポーネント間の通信は props を通じて実現できますが、クロスレベルコンポーネントが使用される場合、props を使用したデータの受け渡しは非常に面倒になります。このとき、provide / inject を通じて祖先コンポーネントにデータを提供し、子孫コンポーネントの inject を通じて必要なデータを取得できます。

2. 親コンポーネントはサブコンポーネントの特定の実装を知りません

場合によっては、親コンポーネントはサブコンポーネントの内部データをどの props にするのかを知りません。 -component が格納されます。このとき、provide を通じて子コンポーネントにデータを渡すことができます。

3. オブザーバーを使用して値の変化を観察し、コンポーネント統合の実装に役立てることができます

provide / inject メソッドを通じて、次のことができます。データを置く これは子孫コンポーネントに提供され、親がコンポーネントの統合を達成するための観察の入り口を残します。

4. プロップの使用が適切でない場合

Vue では、プロップは父と息子の間でデータを転送するための唯一の公式で使いやすい方法です。ただし、複数のサブコンポーネントが同じグローバル変数と提供されたパブリック メソッドを使用したい場合など、場合によっては、provide / inject メソッドを使用できます。

概要

この記事の導入部を通じて、Vue で提供される provide / inject の基本的な使い方とその使用シナリオについて学びました。

provide / inject を使用するプロセスでは、次の 3 つの点に注意する必要があります。

1. provide / inject は主に高レベルのプラグイン開発に使用されるこのツールは、通常のコンポーネントを開発するプログラマーが習得する必要はありません。
provide オプションは、オブジェクトまたはオブジェクトを返す関数である必要があります。このオブジェクトには、他のコンポーネントに注入できるプロパティが含まれています。
3. provide / inject 解決された主な問題は、プラグイン開発でよく使用されるクロスレベル コンポーネント間の情報転送です。

最後に、レベル間のコンポーネント通信などの問題が発生した場合、

provide / inject を使用して問題を解決することができ、より便利なプログラミング方法が提供されます。コードをより簡潔で理解しやすいものにします。

以上がVue の Provide & Inject とは何ですか?またその使用方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。