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 の指定文字によるマージと分割の例のチュートリアル

推薦する

Vueは完全な選択機能を実装しています

この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル

Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...

HTML 基本ノート (推奨)

1. ウェブページの基本構造: XML/HTML コードコンテンツをクリップボードにコピー<...

Webpack でよく使われる 12 個の Loader を共有する (要約)

目次序文スタイルローダーCSSローダーsassローダーpostcssローダーバベルローダーtsローダ...

CocosCreator クラシック エントリー プロジェクト flappybird

目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...

Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィック チュートリアル

Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...

Docker ファイルの保存パス、ポート マッピング操作モードの変更

コンテナの起動コマンドを取得する方法コンテナはすでに作成されていますが、その起動パラメータ(データが...

MySQLウィンドウ関数の具体的な使用法

目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...

HTML 基本要約推奨事項 (テキスト形式)

HTMLテキスト書式タグ 標簽 描述 <b> 定義粗體文本 <em> 呈現...

MacBook 向け Python 3.7 インストール チュートリアル

MacBookにpython3.7.0をインストールする詳細な手順は、参考までに記録されています。具...

MySQL でよく使用されるデータベースとテーブル シャーディング ソリューションの概要

目次1. データベースのボトルネック2. サブライブラリとサブテーブル2. 横長テーブル3. 垂直サ...

DockerがElasticsearch7.xを起動してエラーを報告する問題を解決する

Docker実行コマンドの使用docker run -d -p 9200:9200 -p 9300:...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

Nginx の場所と proxy_pass パスの設定の問題の概要

目次1. Nginxロケーションの基本設定1.1 Nginx 設定ファイル1.2 Pythonスクリ...