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 のその他のコンテンツにも注目していただければ幸いです。