Vue の Provide & Inject とは何ですか?またその使用方法は何ですか?-Vue.js-php.cn

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

PHPz

リリース： 2023-06-11 12:05:53

オリジナル

1321 人が閲覧しました

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 を使用して親子コンポーネント通信を実装できるシナリオをいくつか示します。

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

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

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

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

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

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

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

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

概要

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

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

provide / inject は主に高レベルのプラグイン開発に使用されるこのツールは、通常のコンポーネントを開発するプログラマーが習得する必要はありません。
provide / inject 解決された主な問題は、プラグイン開発でよく使用されるクロスレベルコンポーネント間の情報転送です。

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

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

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