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 をインストールするプロセスと発生した問題

推薦する

IE で UTF8 エンコードされたページで行が理由もなく空白のままになり、UTF8 ページが表示されない問題の解決方法

理由は、すべてのファイルが utf8 でエンコードされているためです。ファイルがインクルードされると...

JavaScriptはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

Webpack パッケージング CSS 背景画像パスの問題に対する完璧なソリューション

vue コンポーネントのスタイル タグ内には、背景画像を使用する次の CSS コードがあります。 背...

MySQL データベースで機密データの暗号化と復号化を実装する方法

目次1. 準備2. MySQL暗号化関数方式2.1 MySQL 暗号化2.2 MYSQL 復号化3....

mysql 5.6.23 winx64.zip インストール詳細チュートリアル

WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

フロートをクリアするための CSS メソッドの概要

フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...

開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...

マークアップ言語 - リスト再び

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...

MySQLユーザー権限管理の詳細な説明

目次序文: 1. ユーザー権利の概要2. 実際の権限管理序文:データベースのユーザー権限管理について...

Bash の山括弧の深い理解 (初心者向け)

序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...