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 バージョンのインストール チュートリアル (画像とテキスト付き)

推薦する

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

マークアップ言語 - アンカー

前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカーHTML のリンクの...

格納可能なセカンダリメニューを実装するための JavaScript

JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

Docker の 4 つのネットワーク タイプの主な例

4 つのネットワーク タイプ:なし: コンテナのネットワーク機能を一切設定しません。--net=no...

MySQLのREDOログとUNDOログの詳細な説明

MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

単一行関数と文字計算日付プロセス制御を説明する MySQL の例

目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...

HTML と JavaScript を使用してローカル メディア (ビデオとオーディオ) ファイルを再生する方法

まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...

Linux で Multitail コマンドを使用するチュートリアル

MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...

CSSスプライト技術は複数の背景を1つのPNG画像に統合しますCSSポジショニング

アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定...