ホームページ >ウェブフロントエンド >Vue.js >Vue での Provide と Inject の使用について説明する記事
Vue での Provide と Inject の使用について説明する記事
- 青灯夜游転載
- 2023-04-10 18:52:131344ブラウズ
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
ではなくデフォルト値であり、# と同様であることを示します。ライフサイクルフックを登録する ##API の
は、コンポーネントの setup() フェーズで同期的に呼び出す必要があります具体的なコード例<pre class="brush:js;toolbar:false;">import {inject,toRefs} from "vue";
const person = inject(&#39;person&#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 &#39;vue&#39;
import { fooSymbol } from &#39;./injectionSymbols&#39;
// 注入值的默认方式
const foo = inject(&#39;foo&#39;)
// 注入响应式的值
const count = inject(&#39;count&#39;)
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
// 注入一个值，若为空则使用提供的默认值
const bar = inject(&#39;foo&#39;, &#39;default value&#39;)
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject(&#39;foo&#39;, () => new Map())
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject(&#39;function&#39;, () => {}, false)</pre>基本的に最初の方法を使用します。デフォルト値を挿入する最も一般的に使用される方法は、親コンポーネントによって提供される渡された値を受け取ることです。 )
inject()
は使用が比較的簡単で、コンポーネント間通信を解決する方法です。より深いネスト レベルを持つコンポーネントの場合、子孫コンポーネントが親コンポーネントのデータを使用したい場合then このメソッドを使用してデータを転送できます。これは現在でも日常のビジネス開発に役立ち、面接で頻繁に聞かれる質問でもあります。クロスレベル コンポーネントと非親コンポーネントを解決する方法-子コンポーネントの通信(学習ビデオ共有: vuejs 入門チュートリアル
、基本プログラミング ビデオ)
以上がVue での Provide と Inject の使用について説明する記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。