Vueマルチレベルコンポーネントのprovide/injectの使用方法の詳細な説明

今回は、Vue のマルチレベル コンポーネントの Provide/Inject の使用方法について詳しく説明します。Vue のマルチレベル コンポーネントの Provide/Inject を使用する際の 注意事項 について、実際のケースを見てみましょう。

provide / inject は 2.2

で追加された新しいメソッドで、祖先コンポーネントからすべての子孫に依存関係 (1 つのコンテンツ) を注入できます。

provider/inject: 簡単に言うと、親コンポーネントの Provider を通じて

変数 を提供し、子コンポーネントの inject を通じて変数を注入します。

Vue 公式警告:

provide と inject は主に、高レベルのプラグイン/コンポーネント ライブラリのユースケースを提供します。アプリケーション コード内で直接使用することはお勧めできません。

もちろん、この警告は単なる警告であり、通常どおり使用できます。

使用方法は、データとプロップを組み合わせたギフト パッケージと非常に似ています:

var Provider = {
 provide: {
 foo: 'bar'
 },
 // ...
}
var Child = {
 inject: ['foo'],
 created () {
 console.log(this.foo) // => "bar"
 }
 // ...
}

唯一の違いは、過去に使用されたイベントバスで解決できますが、レイヤーごとに渡す必要がないことです。根深い問題があると、イベント全体の原因になります。エミットの構成は非常に混乱しており、維持するのが困難です。 Provide / Inject を使用すると、親子の一方向データ フローを明確にすることができます。

React

の Context の Provider/Consumer にも同じ効果があります。私はまだ詳細に使用していないため、React 自体については限られた理解しかありません。それについては学習することにします。興味のある学生は後でドキュメントを読んで詳細を学ぶことができます。 参考記事:

Vue 公式ドキュメント

Vue 2.2 での提供/挿入

この記事の事例を読んで、この方法を習得したと思います。さらに興味深い情報については、php 中国語に関する他の関連記事に注目してください。 Webサイト！

推奨書籍:

JavaScript DOM 要素を追加、削除、変更する手順の詳細な説明

Vue は vee-validate を使用してフォームを検証するステップごとの説明

以上がVueマルチレベルコンポーネントのprovide/injectの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。