Vue3 での provide と injection の使用

Vue3 での provide と injection の使用

1. provideとinjectの説明

Provide と Inject により、ネストされたコンポーネント間でデータを転送できます。
両方の機能はセットアップ機能で使用されます。
親コンポーネントは provide を使用してデータを下位に渡します。
子コンポーネントは inject を使用して、親コンポーネントから渡されたデータを取得します。
以下の点に注意してください。
1==>provideはデータを下方向にのみ渡すことができます
2==>provideとinjectを使用する場合は、vueからインポートする必要があります

2. provideとinjectの使用

2つのコンポーネントサブコンポーネントErZi.vueを作成します。
孫コンポーネント SunZI.vue
親コンポーネントから子コンポーネントにデータを渡します。
すると、息子と孫の両方のコンポーネントがそれを受け取ります。
そしてそれをビューに表示する

3. 親コンポーネント

<テンプレート>
  <erzi-com></erzi-com>
</テンプレート>
<script lang="ts">
「../components/ErZi.vue」からErZiをインポートします。
「vue」から{provide, ref}をインポートします
エクスポートデフォルト{
  名前:"概要",
  コンポーネント:{
    'erzi-com':エルジ
  },
  設定(){
    giveSunziData=ref({
       100、
       高さ:50,
       bg:'ピンク'
    })
    // 最初のパラメータは共有データの名前です (giveSunzi)
    // 2 番目のパラメータは共有データ (giveSunziData) です
    提供する('Sunzi'、SunziDataを提供する)
  }
}
</スクリプト>

親コンポーネントは子コンポーネントにオブジェクトを渡す
provideはsetUpの組み合わせAPIで使用されます
provide の使用方法:
提供 ('共有データ名'、共有値)
共有値は文字列、数値、オブジェクト、配列になります

サブコンポーネントが受信中の場合。
let xxx=inject('共有データ名');

4. 息子コンポーネント

<テンプレート>
    <div>
      <h2>息子のコンポーネント</h2>
      <div>値を取得: {{getFaytherData}}</div>
    </div>
    <hr/>
    <sun-con></sun-con>
</テンプレート>
<script lang="ts">
'vue' から defineComponent をインポートし、 inject します。
「./SunZI.vue」からSunZIをインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'ErZi'、
   コンポーネント:{
     'sun-con':SunZI
   },
    設定(){
      getFaytherData = inject('giveSunzi'); を取得します。
      戻り値: getFaytherData
    }
});
</スクリプト>

5. 孫コンポーネント

<テンプレート>
    <div>
         <h2>孫コンポーネント</h2>
         <div>取得された値は {{getYeYeData} です。}</div>
    </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent,inject} をインポートします。
エクスポートデフォルトdefineComponent({
   設定(){
     getYeYeData=inject('giveSunzi'); を取得します。
    戻り値: getYeYeData
   }
});
</スクリプト>

6. レンダリング

7. 親コンポーネントは複数のプロバイダーを渡すことができますか?

場合によっては、親コンポーネントが複数のプロバイダーを渡す必要がある場合があります。
データを分離しておきたいからです。
このとき、複数のrovidesを渡す必要があります。
練習すれば、親コンポーネントは複数のルーターを通過できるようになります。 ! ! !
これには問題はありません。

ただし、個人的にはこのアプローチはお勧めしません。データを渡すときに、一度に複数のデータを組み立てることができます。
組み立て後、転送

8. rovideとinjectの参照シナリオ

親コンポーネントが子コンポーネントに配布するデータが大量にある場合、
provide と inject を使用できます。

これで、vue3 での provide と inject の使用に関するこの記事は終了です。vue provide と inject の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 における Provide/Inject の実装原則の共有
  • Vue3 における provide と inject の使用法と原則
  • Vue3のprovideとinjectの使用に関するヒントを共有する

<<:  Tomcatディレクトリ構造の詳細な説明

>>:  MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

推薦する

MySQLインデックスの詳細な分析

序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...

ネイティブ js を使用してライブ バレット スクリーンのスクロール効果をシミュレートします。

目次1. 基本原則2. 特定のコード要約する1. 基本原則まず、生放送エリアを10の部分に分割し(個...

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法

MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...

Truncate Table の使用法の説明

テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...

シェルスクリプトを使用したMySQLデータベースの自動バックアップ

シェルスクリプトを使用したMySQLデータベースの自動バックアップデータベースを頻繁にバックアップす...

NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

1: アドレス書き換えとア​​ドレス転送の意味を理解する。アドレス書き換えとア​​ドレス転送は異なる...

DockerコンテナでArthasを使用するための詳細な手順

Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...

dubbo での Zookeeper リクエストのタイムアウト問題: mysql8.0.15 に接続する mybatis+spring の構成

ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...

W3C チュートリアル (11): W3C DOM アクティビティ

ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...

MySQL で日付を保存するためのベスト プラクティス ガイド

目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...

背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...