Vue で親兄弟コンポーネントにパラメータを渡す方法の簡単な分析

Vue は、ユーザー インターフェイスやシングルページ アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue では、コンポーネントはアプリケーションの基本的な構成要素であり、コンポーネントを再利用したり組み合わせたりして、より大きなアプリケーションを構築できます。 Vue コンポーネントでは、その親コン​​ポーネントにパラメータを渡す必要がある場合がありますが、この記事ではこの機能を Vue で実装する方法を詳しく紹介します。

Vue とは何ですか?

Vue は、使いやすく、コードが簡潔で、強力でモバイル対応などの軽量フレームワークです。 Vue の公式ドキュメントには、開発者が簡単に使用できるように、チュートリアルとドキュメントの完全なセットと API ドキュメントが提供されています。さらに、そのコミュニティは非常に活発であり、開発者にさらなる支援を提供する Nuxt.js のような高度なフレームワークが多数あります。

Vue コンポーネント

Vue コンポーネントは、Vue アプリケーションの基本的な構成要素です。コンポーネントを使用すると、開発者は再利用可能な UI コンポーネントを構築し、これらのコンポーネントを組み合わせてより大きなアプリケーションを構築できます。 Vue コンポーネントはボトムアップで構築され、親コンポーネントには子コンポーネントが含まれ、子コンポーネントにはさらに多くの子コンポーネントが含まれる場合があり、最終的には完全なアプリケーションになります。

この親子関係では、親コンポーネントは props 属性を通じて子コンポーネントにデータを渡すことができます。Props は、コンポーネントにデータを渡すために使用されるプロパティです。

親子コンポーネント

Vue では、親子コンポーネント間の通信は非常に一般的なシナリオです。コンポーネント ツリーでは、親コンポーネントが props を通じて子コンポーネントにデータを渡すことができるため、コンポーネント間のデータ フローが非常にシンプルになります。親コンポーネントはいくつかのデータまたはメソッドを持つことができ、子コンポーネントはこれらのデータとメソッドに基づいてプログラムできます。通常、子コンポーネントは、親コンポーネントから props 属性を通じて渡されたデータを受け取り、これらのデータを独自のビジネス ロジックに使用します。

親コンポーネントは props 属性を使用して子コンポーネントにデータを渡し、子コンポーネントは $emit メソッドを使用して親コンポーネントにデータを送信します。ただし、シナリオによっては、直接の親子関係ではなく兄弟関係が存在する場合があり (下図を参照)、この場合、データ転送にはイベント バス EventBus または Vuex を使用する必要があります。

兄弟コンポーネント

Vue では、兄弟コンポーネント間の通信には、中央イベント バスである EventBus を使用する必要があります。このイベント バスは、イベントのディスパッチとリッスンに使用できる Vue インスタンスです。 Vue インスタンスでは、$on メソッドを使用してイベントをリッスンし、$emit メソッドを使用してイベントをトリガーできます。兄弟コンポーネントの場合、中央のイベント バスをグローバル変数としてウィンドウにインポートし、コンポーネントの $emit メソッドを通じてイベントをトリガーし、別のコンポーネントの $on メソッドを通じてイベントをリッスンする必要があります。配信データを正しく受信できています。

イベント バスを使用して兄弟コンポーネント間の通信を構築すると、コードがより明確になり、比較的単純な実装方法である Vuex を使用して状態を管理する必要がなくなります。

コード実装

次は、Vue での中央イベント バス通信の使用例です。2 つの兄弟コンポーネントがあり、それらの間でデータを転送する必要があると仮定します。 # コードでは、Vue インスタンスを中央のイベント バスとして使用し、兄弟コンポーネント A の sendMessage メソッドを通じてイベント バスにデータを送信し、兄弟コンポーネント B の create メソッドを通じてイベントをリッスンし、受信したデータを定数メッセージに変換します。最後に、この定数の値を兄弟コンポーネント B に表示することで、兄弟コンポーネント間のデータ転送を実現します。

概要

Vue では、父と息子の間のデータ転送は非常に自然かつ直接的ですが、兄弟間のデータ転送にはイベント バスまたは Vuex を使用する必要があります。つまり、Vue の兄弟コンポーネント間の通信は難しくなく、Vue 独自のイベント バス機構を使用して簡単にデータを転送できます。このアプローチはシンプルで保守が容易であり、冗長なライブラリやフレームワークを使用する必要がありません。

以上がVue で親兄弟コンポーネントにパラメータを渡す方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。