Vue での Provide と Inject の使用について説明する記事

Vue で Provide と Inject を使用するにはどうすればよいですか? Vueでのprovideとinjectの使い方については以下の記事で紹介していますので、ご参考になれば幸いです。

vue2.0provide と inject はオプション (設定)API メソッドは、コンポーネント間 (祖父母と孫) 通信の問題を解決するためにコンポーネントで使用されます。

は、親コンポーネントと子コンポーネント間の通信です。親コンポーネントは、カスタム属性を通じてリストされます。 、および sub -コンポーネントは props を通じて受信されます。レイヤーごとに渡す場合、この方法はより面倒で柔軟性が低くなります。

provide および inject が解決策です: クロスレベルコンポーネントのデータ転送を実現するために、祖先コンポーネントから孫コンポーネントにデータを渡す方法

vue3.0 では、同じ provide と inject は、よりシンプルで使いやすく提供されていますが、純粋に概念的な観点から見ると、比較的抽象的で理解しにくいです。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

引き続き具体的な例から開始

provide() 関数

定義: 子孫コンポーネントによって注入できる値を提供します。

実装: 親コンポーネントには provide があります。 、データを提供するオプション。親コンポーネントによって渡されたデータの使用を開始するための inject オプションが子孫コンポーネントにあります。

provide (最初のパラメーター、2 番目のパラメーター) ) 、2 つのパラメーターを受け取ります。最初のパラメーターは注入される key です。文字列または symbol にすることができます。2 番目のパラメーターは注入される値です (子孫コンポーネントに渡される特定のデータ)

provide は、vue

によって提供される公式

componsion API です。具体的な例コードは次のとおりです

import {reactive,provide} from "vue";

let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);

上記の provide で値を提供するだけで十分です。次に、このデータを子孫コンポーネントに渡す方法は、inject # を使用する必要があります。

##inject() 関数

定義: 祖先 (親) コンポーネントまたはアプリケーション全体によって提供された値を注入します

実装: 親 (祖先) コンポーネントによって渡された値を受け取る

inject(最初のパラメーター、2 番目のパラメーター (オプション)): 最初のパラメーターは、親 (祖先) コンポーネントから取得された、挿入された key です。両方とも一貫している必要があります。

Vue は、親コンポーネント チェーンを横断し、提供されたコンポーネントを決定します。親コンポーネント チェーン上の複数のコンポーネントが同じ key を提供する場合、より近いコンポーネントが、チェーンのさらに上のコンポーネントによって提供される値を上書きします。値

key と一致する値がない場合、デフォルト値#が指定されていない限り、inject() 関数は unknown を返します。パラメーターはオプションです。つまり、一致する key

がない場合、デフォルト値が使用されます。作成がより複雑な値を返す関数にすることもできます。デフォルト値自体が関数

、次に false

を 3 番目のパラメーターとして渡す必要があります。これは、この関数がファクトリー関数

ではなくデフォルト値であり、# と同様であることを示します。ライフサイクルフックを登録する ##API の

inject()

は、コンポーネントの setup() フェーズで同期的に呼び出す必要があります具体的なコード例<pre class="brush:js;toolbar:false;">import {inject,toRefs} from &quot;vue&quot;; const person = inject(&amp;#39;person&amp;#39;); // 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数 const {name,website} = toRefs(person);</pre>孫コンポーネントのテンプレートを読み取ることができ、親コンポーネントから渡されたデータも応答性をサポートします

{{person.name}}---{{person.website}}

分割を使用する場合、変数をテンプレート内で直接使用できます

{{name}}--{{website}}

分割を使用する場合、変数をテンプレート内で直接使用できます

{{name}}--{{website}}

Note

変数を分割し、データを応答性を高めるには、toRef() または

toRefs() を使用する必要があります。

データを応答性に変換する以下は完全な例です<pre class="brush:js;toolbar:false;">import { inject } from &amp;#39;vue&amp;#39; import { fooSymbol } from &amp;#39;./injectionSymbols&amp;#39; // 注入值的默认方式 const foo = inject(&amp;#39;foo&amp;#39;) // 注入响应式的值 const count = inject(&amp;#39;count&amp;#39;) // 通过 Symbol 类型的 key 注入 const foo2 = inject(fooSymbol) // 注入一个值，若为空则使用提供的默认值 const bar = inject(&amp;#39;foo&amp;#39;, &amp;#39;default value&amp;#39;) // 注入一个值，若为空则使用提供的工厂函数 const baz = inject(&amp;#39;foo&amp;#39;, () =&gt; new Map()) // 注入时为了表明提供的默认值是个函数，需要传入第三个参数 const fn = inject(&amp;#39;function&amp;#39;, () =&gt; {}, false)</pre>基本的に最初の方法を使用します。デフォルト値を挿入する最も一般的に使用される方法は、親コンポーネントによって提供される渡された値を受け取ることです。 )

および

inject()

は使用が比較的簡単で、コンポーネント間通信を解決する方法です。より深いネスト レベルを持つコンポーネントの場合、子孫コンポーネントが親コンポーネントのデータを使用したい場合

then このメソッドを使用してデータを転送できます。これは現在でも日常のビジネス開発に役立ち、面接で頻繁に聞かれる質問でもあります。クロスレベル コンポーネントと非親コンポーネントを解決する方法-子コンポーネントの通信

(学習ビデオ共有: vuejs 入門チュートリアル

、

基本プログラミング ビデオ)

以上がVue での Provide と Inject の使用について説明する記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。