Vue で親コンポーネントと子コンポーネント間の通信を実装するにはどうすればよいですか?

Vue では、コンポーネントはユーザー インターフェイスを構築する重要な部分であり、インターフェイスをより小さく再利用可能な部分に簡単に分解できます。ページには複数のコンポーネントが含まれる場合があるため、コンポーネント間の通信が重要になります。特に親コンポーネントと子コンポーネント間の通信。

Vue は、props と $emit を介して親コンポーネントと子コンポーネント間の通信を実装します。この記事では両方の方法を紹介します。

1. Props

Props は、Vue の親コンポーネントが子コンポーネントにデータを渡す方法です。 props は、子コンポーネントに渡されるデータ属性を格納する配列です。子コンポーネントでは、props を使用して親コンポーネントから渡されたデータを受け取ります。

プロパティの使用: まず、親コンポーネントでプロパティを定義します。コードは次のとおりです:

上記のコードでは、親コンポーネントは、message という名前のメッセージを子コンポーネントに渡します。小道具、プロパティ。

次に、子コンポーネントで props を受け取ります。

子コンポーネントでは、親コンポーネントによって渡されたメッセージ属性が props を介して受信されます。

このとき、親コンポーネントのページには「親コンポーネントデータ」という値が表示されます。

2. $emit

$emit は、Vue のサブコンポーネントが親コンポーネントにメッセージを送信する方法です。子コンポーネントで特定のイベントが発生すると、$emit を通じて親コンポーネントのイベント メソッドをトリガーできます。 $emit メソッドの最初のパラメーターはトリガーされるイベントの名前で、2 番目のパラメーターは親コンポーネントに渡されるパラメーターです。

$emit の使用法: まず、子コンポーネントでイベント メソッドを定義します。イベントがトリガーされたら、$emit メソッドを呼び出してメッセージを親コンポーネントに渡します。コードは次のとおりです:

上記のコードでは、子コンポーネントは onClick イベント メソッドを定義しています。ボタンがクリックされると、$emit メソッドを通じて child-msg という名前のイベントがトリガーされ、「子コンポーネント データ」パラメータが渡されます。 。

次に、親コンポーネントでこのイベントをリッスンします:

上記のコードでは、親コンポーネントは @ 記号を使用して子コンポーネントのイベントをリッスンします。子コンポーネントが child-msg イベントをトリガーすると、親コンポーネントはイベントに応答し、getChildMsg メソッドを通じて子コンポーネントから渡されたデータを受信し、そのデータをページに表示します。

上記 2 つの方法により、Vue で親コンポーネントと子コンポーネント間の通信を実現できます。コードは簡潔で理解しやすく、保守しやすいため、コンポーネント開発の効率が向上します。

以上がVue で親コンポーネントと子コンポーネント間の通信を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。