Vue3 における非親子コンポーネントの値転送の詳細な説明

Vue3 における非親子コンポーネントの値転送の詳細な説明
vue2 における非親子コンポーネントの値の伝達は、主にイベント バスを介して行われ、vue インスタンスを作成し、そのインスタンスを異なるコンポーネントにインポートすることで、非親子コンポーネント間の通信動作を実装します。
Vue3 は **provide** プロパティと **inject** プロパティを提供しており、親子関係のないコンポーネント間の通信を実現できます。
App.vue (親)、sub1 (子)、sub2 (子の子) の 3 つのコンポーネントがあるとします。

アプリ.vue

<テンプレート>
  <div style="border: 1px solid pink">
    <h1>私はあなたの父親です</h1>
    👇
    <sub1/>
  </div>
</テンプレート>
<スクリプト>
  './sub1' から sub1 をインポートします
	エクスポートデフォルト{
		名前:「アプリ」、
    コンポーネント:{
			サブ1、
    },
    provide:{ // 親コンポーネントで provide を定義して、渡される値を宣言します names:['peanut','javascriptKing']
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

サブ1.vue

<テンプレート>
  <h2>私は第 1 レベルの子コンポーネントです</h2>
  👇
  <sub2/>
</テンプレート>
<スクリプト>
  「./sub2」からsub2をインポートします。
	エクスポートデフォルト{
		名前: "sub1",
    コンポーネント:{
			サブ2、
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

サブ2.vue

<テンプレート>
  <h3>私は末っ子、孫です</h3>
  <div>トップレベルコンポーネントの名前配列を参照しました ===> {{names}}</div>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		名前: "sub2",
    // inject:['names'] を通じて子コンポーネントでクロスレベル値を受け入れます。
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

実装効果は次のようになり、トップレベルコンポーネントで渡された値が正常に取得できることがわかります。

ここに画像の説明を挿入

しかし、問題もあります。

つまり、トップレベルのコンポーネントが渡したい値が変更された場合、どうすればそれを応答性のあるものにできるでしょうか?

provide プロパティでこれを使用して現在のインスタンスを取得するにはどうすればよいでしょうか?

ここでは、provide 属性をメソッドとして記述し、配列またはオブジェクトを返す必要があります。

<テンプレート>
  <div style="border: 1px solid pink">
    <h1>私はあなたの父親です</h1>
    👇
    <sub1/>
  </div>
</テンプレート>
<スクリプト>
  './sub1' から sub1 をインポートします
	エクスポートデフォルト{
		名前:「アプリ」、
    データ(){
			戻る {
				名前:['ピーナッツ','javascriptキング']
      }
    },
    コンポーネント:{
			サブ1、
    },
    /*このように書いても、this は取得されません。現時点では、スクリプト内の this のスコープが未定義であることを意味します*/
    /*提供する:{
			this.names、
    }*/
  // 次のように記述する必要があります provide(){
    	戻る {
    		名前:this.names
      }
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

上で書いたように、これで指し示すインスタンス配下のデータを取得することはできるのですが、これらを依存関係を形成させて応答性を実現するにはどうすればよいのでしょうか。これを行うには、App.vue に次の変更を加える必要があります。

<テンプレート>
  <div style="border: 1px solid pink">
    <h1>私はあなたの父親です</h1>
    👇
    <sub1/>
  </div>
</テンプレート>
<スクリプト>
  './sub1' から sub1 をインポートします
  'vue' から { computed } をインポートします
	エクスポートデフォルト{
		名前:「アプリ」、
    データ(){
			戻る {
				名前:['ピーナッツ','javascriptキング']
      }
    },
    コンポーネント:{
			サブ1、
    },
    /*このように書いても、this は取得されません。現時点では、スクリプト内の this のスコープが未定義であることを意味します*/
    /*提供する:{
			this.names、
    }*/
  // 次のように記述する必要があります provide(){
    	戻る {
    		names:computed(() =>{ this.names.length }) // 計算プロパティを使用して変数を返すことで、names がデータ内の名前と依存関係を形成するようにします}
    },
    マウント() {
    	設定間隔(()=>{
    		this.names.push('vue king!')
      },1000)
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueのコンポーネント間で通信して値を渡すいくつかの方法の詳細な説明
  • Vue コンポーネント間で値を渡す方法をどうやって知っていますか?
  • Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明
  • Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明
  • Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明
  • 非常にシンプルでわかりやすいvueコンポーネントの値転送

<<:  ログインインターフェースの使いやすさとセキュリティのバランスをとる方法

>>:  Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要

推薦する

Linux のスクリーンコマンドとその使い方

画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...

JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言...

Docker イメージを削除できません エラー: そのようなイメージはありません: xxxxxx 解決策

序文docker イメージを削除できません。docker docker imagesを確認すると、イ...

Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...

ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS

効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ​...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

IDEA の Docker プラグインを介して SpringBoot プロジェクトをデプロイするプロセスの詳細な説明

1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

MySQL マスタースレーブ同期、トランザクションロールバックの実装原理

ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

MySQL データベース ターミナル - 一般的な操作コマンド コード

目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...

Python Flask WeChat アプレットのログインプロセスとログイン API 実装コード

1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

LinuxにVSCodeをダウンロードしてインストールし、プログラミングを使用して現在の時刻を出力する

rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...