1. provide/inject の用途は何ですか?よく使われる親子コンポーネントの通信方法は、親コンポーネントが子コンポーネントに渡すデータをバインドし、子コンポーネントが props 属性を通じてそれを受け取るというものです。コンポーネントの階層が多くなると、このように 1 レベルずつ値を渡すのは非常に面倒で、コードの可読性も高くなく、後々のメンテナンスにも不便です。 Vue は、複数レベルのネストされた通信の問題を解決するために provide と inject を提供します。 provide では、子孫コンポーネントに渡すデータを指定し、子孫コンポーネントは、inject を通じて祖父母コンポーネントから渡されたデータを挿入します。 使用シナリオ: Vue には $parent プロパティがあるため、子コンポーネントは親コンポーネントにアクセスできます。しかし、孫コンポーネントが祖先コンポーネントにアクセスするのは困難です。 provide/inject を使用すると、レベルをまたいで祖先コンポーネントのデータに簡単にアクセスできます。 2. provide/injectの使い方provide: はオブジェクトを返すオブジェクト/関数です。 内部には属性と属性値があります。 注: 子孫レイヤーの提供は、祖父母レイヤーの提供の同じキーの属性値をカバーします。 挿入: 文字列の配列、またはオブジェクト。 属性値は、from および default のデフォルト値を含むオブジェクトにすることができます。From は、使用可能な注入コンテンツを検索するために使用されるキー (文字列またはシンボル) です。つまり、祖父のマルチレイヤー プロバイダーは大量のデータを提供し、from 属性は取得するキーを指定します。 default はデフォルト値を指定します。 具体的な使用法:親コンポーネント <テンプレート> <div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ コンポーネント: マージヒントダイアログ、 ブレイクネットヒント }, データ () { 戻る { isShow: false、 ルータが生きているかどうか: true }, // 親コンポーネントから返されて従属コンポーネントに渡されるデータは、関数またはデータ provide() 内のデータになります。 戻る { リロード: this.reload isShow: this.isShow } }, メソッド: { リロード(){ this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true }) } } } </スクリプト> 子孫 <テンプレート> <ポップアップ割り当て :id="id" @success="成功ハンドル" > <div class="confirm-d-tit"><span class="gray-small-btn">{{ 名前 }}</span></div> <strong>割り当てられる</strong> <a スロット="参照" クラス="unite-btn" > 割り当て </ポップアップ割り当て> </テンプレート> <スクリプト> '../PopupAssign' から PopupAssign をインポートします エクスポートデフォルト{ //vue リロードメソッドのコンテンツを参照 isShow 挿入: ['reload','isShow'], コンポーネント: ポップアップ割り当て }, メソッド: { 非同期の成功ハンドル(){ これをリロードします。 } } } </スクリプト> Vue3.0 の使用法親コンポーネント サブコンポーネント 要約するこれで、vue2.0/3.0 での provide と inject の使用に関するこの記事は終了です。vue での provide と inject の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL の指定文字によるマージと分割の例のチュートリアル
序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...
偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...
# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...
ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...
この記事では、テキストクロックを実装するためのキャンバスの具体的なコードを例として紹介します。具体的...
レプリケーションとは、マスター データベースの DDL および DML 操作をバイナリ ログを介して...
IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...
今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...
この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介し...
@ ルールは、CSS の実行または動作に関する指示を提供する宣言です。各宣言は @ で始まり、その...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
フレーム:スタイル=”border-style:solid;border-width:5px;bor...
導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...
ステップ1: システムのアーキテクチャを確認する dpkg --print-architecture...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...