Vueコンポーネント間のデータ共有の詳細な説明

Vueコンポーネント間のデータ共有の詳細な説明

1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けられます。

1. 父と息子の関係

2. 兄弟関係

1.1 親コンポーネントと子コンポーネント間のデータ共有

親コンポーネントと子コンポーネント間のデータ共有は、次のように分けられます。

1. 親→子の共有データ

サブコンポーネント:

ここに画像の説明を挿入

親コンポーネント:

ここに画像の説明を挿入

2. 子→親の共有データ

子コンポーネントはカスタム イベントを使用して親コンポーネントとデータを共有します。サンプルコードは次のとおりです

サブコンポーネント:

ここに画像の説明を挿入

親コンポーネント:

ここに画像の説明を挿入

ページに結果が表示されます:

ここに画像の説明を挿入

1.2 兄弟コンポーネント間のデータ共有

vue2.xでは、兄弟コンポーネント間でデータを共有するためのソリューションはEventBusです。

EventBus の使用法:

  • eventBus.jsモジュールを作成し、Vueインスタンスオブジェクトを共有する
  • データ送信側で、bus.$emit('イベント名', 送信するデータ)メソッドを呼び出してカスタムイベントをトリガーします。
  • データ受信側では、bus.$on('イベント名', イベント処理関数)メソッドを呼び出してカスタムイベントを登録します。

例:

1. eventBus.jsモジュールを作成し、Vueインスタンスオブジェクトを共有する

ここに画像の説明を挿入

2. データ送信側で、bus.$emit('イベント名', 送信データ)メソッドを呼び出してカスタムイベントをトリガーします。

ここに画像の説明を挿入

3. データ受信側で、bus.$on('イベント名', イベント処理関数)メソッドを呼び出してカスタムイベントを登録します。

ここに画像の説明を挿入

要約する

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

以下もご興味があるかもしれません:
  • Vueのライフサイクルについて学びましょう
  • Vue3ライフサイクルフック機能の詳しい説明
  • Vueのライフサイクルについての簡単な説明
  • Vue ローカルコンポーネントデータ共有 Vue.observable() の使用
  • Vueは2つのコンポーネント間のデータ共有と変更操作を実装します
  • Vueのライフサイクルとデータ共有の詳細な説明

<<:  ウェブデザインのグラフィック構成と組版機能の紹介

>>:  Windows Server 2016 に Docker をインストールするプロセスと発生した問題

推薦する

dockerコマンドの使用にはsudoは必要ありません

docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...

select count() と select count(1) の違いと実行方法

Count(*) または Count(1) または Count([column]) は、おそらく S...

イメージのパッケージ化とワンクリック展開を実現するためにDockerを組み合わせたアイデア

1. サーバーにDockerをインストールする yumでdockerをインストール設定ファイルを変更...

Centos7 Zabbix3.4 メールアラーム設定(メール内容がxx.bin添付ファイルになる問題の解決)

目次1. 監視Linuxホストを追加する2. メールボックスを設定する1. 監視Linuxホストを追...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

HTML+CSSを使用してマウスの動きを追跡する

ユーザーがプライバシーを意識するようになり、オンライン トラッキングに対する予防策を強化するにつれて...

docker-maven-pluginプラグインは対応するjarパッケージを取得できません

docker-maven-plugin プラグインを使用する場合、Maven は対応する jar パ...

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...

MySQLクエリが遅い場合の理由と解決策

Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

Linux nslookup コマンドの使用方法の詳細な説明

[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...

React ルーティング リンク構成の詳細

1. 属性へのリンク(1)ルーティングパスを配置する(2)指定された形式でオブジェクトを配置する{パ...

CSS スタイルが機能しない (史上最も完全な解決策の概要)

ページを作成するときに、記述した CSS スタイルが有効にならないことがあります。この現象にはさまざ...