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

PHPz

リリース： 2023-04-11 15:23:20

オリジナル

782 人が閲覧しました

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 に表示することで、兄弟コンポーネント間のデータ転送を実現します。

概要