Vue でコンポーネント通信にスロットを使用するにはどうすればよいですか?

Vue でコンポーネント通信にスロットを使用するにはどうすればよいですか?

Vue では、コンポーネントは Web アプリケーション構築の中核です。一般的なニーズは、異なるコンポーネント間でデータを渡したり、特定の操作を実行したりするために、親コンポーネントが子コンポーネントと通信することです。 Vue は、コンポーネント間の通信をより柔軟かつ便利にするスロットと呼ばれるメカニズムを提供します。

スロットを使用すると、開発者はコンポーネントのテンプレートで柔軟に置き換え可能なコンテンツを定義し、そのコンポーネントを使用する親コンポーネントに特定のコンテンツを入力できます。このように、コンポーネントのテンプレートはレイアウトの骨格を定義し、親コンポーネントはコンポーネントを使用する際の特定の状況に応じて異なるコンテンツを埋めることができるため、コンポーネント間の通信が実現されます。

以下では、簡単な例を使用して、Vue でのコンポーネント通信にスロットを使用する方法を説明します。まず、スロットを含む親コンポーネントParentを定義します。

上記のコードでは、スロットはタグを使用して定義されており、コンポーネントがサブコンポーネントのコンテンツを挿入する場所を示しています。次に、スロットの具体的なコンテンツとして親コンポーネントに挿入される子コンポーネントChildを定義します。

上記のコードでは、this.$emitメソッドを通じてカスタム イベントchild-eventをトリガーし、パラメーター' Hello from child を渡しました。 !'。このとき、親コンポーネントは、イベントが発生したときに対応するデータを取得するために、子コンポーネントによってトリガーされたイベントをリッスンする必要があります。

親コンポーネントでは、子コンポーネント タグのv-onディレクティブを使用し、v-slot を使用することで、子コンポーネントによってトリガーされたイベントをリッスンできます。ディレクティブ スロットを埋めます。

上記のコードでは、