Vue2.0/3.0 での provide と inject の使用例

Vue2.0/3.0 での provide と inject の使用例

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue2.0 と DataTable プラグインを組み合わせてテーブルを動的に更新する方法の詳細な説明
  • vue3とvue2の利点の比較
  • Vue2.xは、ユーザーのログインと終了を実装するためにルーティングナビゲーションガードを設定します。
  • vue2.x の徹底研究 - h 関数の説明
  • Vue2.x の応答性の簡単な説明と例
  • Vue3とVue2の利点のまとめ
  • Vue2は応答性を提供するためにprovide injectを実装しています
  • レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析
  • vue.config.js からプロジェクト最適化までの vue2.x 構成
  • 手書きの Vue2.0 データハイジャックの例
  • Vue2.x - アンチシェイクとスロットリングの使用例
  • ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

<<:  Linux 上のカラフルな猫

>>:  MySQL の指定文字によるマージと分割の例のチュートリアル

推薦する

mysqlタイムスタンプの使用

序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...

Postman に基づく HTTP インターフェース テスト プロセスの分析

偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

訪問者を惹きつけるウェブサイトコンテンツを作成する14の方法

ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...

JavaScript キャンバス テキスト クロック

この記事では、テキストクロックを実装するためのキャンバスの具体的なコードを例として紹介します。具体的...

MySQL レプリケーションの利点と原則を詳しく説明します

レプリケーションとは、マスター データベースの DDL および DML 操作をバイナリ ログを介して...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...

Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...

デジタル時計効果を実現するJavaScript

この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介し...

CSS における @ の使用法の概要 (例と説明付き)

@ ルールは、CSS の実行または動作に関する指示を提供する宣言です。各宣言は @ で始まり、その...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

Divの境界と透明度に関する設定

フレーム:スタイル=”border-style:solid;border-width:5px;bor...

SSMは、mysqlデータベースアカウントのパスワード暗号文ログイン機能を実装します。

導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...

Ubuntu 16.04 64ビット版を3つのステップで32ビットプログラムと互換性を持たせる

ステップ1: システムのアーキテクチャを確認する dpkg --print-architecture...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...