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 の指定文字によるマージと分割の例のチュートリアル
この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...
1. ウェブページの基本構造: XML/HTML コードコンテンツをクリップボードにコピー<...
目次序文スタイルローダーCSSローダーsassローダーpostcssローダーバベルローダーtsローダ...
目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...
Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...
コンテナの起動コマンドを取得する方法コンテナはすでに作成されていますが、その起動パラメータ(データが...
目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...
HTMLテキスト書式タグ 標簽 描述 <b> 定義粗體文本 <em> 呈現...
MacBookにpython3.7.0をインストールする詳細な手順は、参考までに記録されています。具...
目次1. データベースのボトルネック2. サブライブラリとサブテーブル2. 横長テーブル3. 垂直サ...
Docker実行コマンドの使用docker run -d -p 9200:9200 -p 9300:...
私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...
1. PAM設定ファイルを編集する sudo vim /etc/pam.d/ログイン2行目に以下を...
目次1. Nginxロケーションの基本設定1.1 Nginx 設定ファイル1.2 Pythonスクリ...