Vue で Provide/Inject を使用して、祖先コンポーネントと子孫コンポーネント間の非応答データ転送を実装する方法

Vue は、provide と inject という 2 つの高レベル API を提供します。これは、開発者が祖先コンポーネントと子孫コンポーネントの間で非応答性のデータ転送を実行するのに役立ちます。これらのデータは、プリミティブ値、配列、オブジェクトだけでなく、関数やクラスも含まれます。

Vue では、コンポーネント間のデータ転送は、通常、親コンポーネントと子コンポーネント間の応答型データ転送と兄弟コンポーネント間の応答型データ転送の 2 つのタイプに分類されます。ただし、祖先と子孫の間で応答しないデータを渡す必要がある場合は、provide/inject の使用が必要になります。

provide と inject は、クロスレベル コンポーネント間のデータ転送の問題を解決するために Vue2.2.0 で導入されました。以前は、親コンポーネントと子コンポーネントの間でデータを転送したい場合、通常は props と events を通じて実装していました。ただし、祖先コンポーネントと子孫コンポーネントの間で非応答的なデータ転送が必要な場合、props や events は適しておらず、現時点では Provide と Inject を使用する必要があります。

さあ、例を見てみましょう:

<grand-parent>
    <parent>
        <child></child>
    </parent>
</grand-parent>

この例では、祖父母は祖先コンポーネント、親は子コンポーネント、子は子孫コンポーネントです。 Provide を使用して祖父母にデータを提供し、子で Inject を使用してこのデータにアクセスできます。

まず、provide を使用して、親コンポーネントにデータを提供する必要があります。

provide: {
    someData: '这是一些数据'
}

ここでは、someData という名前の非応答データを提供します。

次に、子コンポーネントで inject を使用して、これらのデータにアクセスします。

inject: ['someData'],

ここでは、inject を使用して someData データを注入し、子コンポーネントの someData にアクセスできるようにします。

単純なデータ型に加えて、provide を使用していくつかの関数やクラスを提供することもできます。

provide: {
    someMethod: this.doSomething,
    someClass: new MyClass()
}

この例では、メソッドを提供するだけでなく、クラス Example も提供します。子孫コンポーネントでは、inject を使用してこれらのデータにアクセスできます。

inject: ['someMethod', 'someClass'],

ここでは、inject を使用して someMethod と someClass を注入し、子孫コンポーネントでこれらのデータにアクセスできるようにします。

provide と inject は応答しないため、データの変更はリッスンされないことに注意してください。応答性の高いデータ転送を実行する必要がある場合は、props と events を使用する必要があります。

要約すると、provide と inject は Vue の非常に便利な API であり、祖先と子孫の間で非応答性のデータ転送を実行するのに役立ちます。 Provide と Inject は、応答しないデータを渡す必要がある場合に適した選択肢です。

以上がVue で Provide/Inject を使用して、祖先コンポーネントと子孫コンポーネント間の非応答データ転送を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。