囲んでいる Aura コンポーネントへのイベントの送信

子から親への通信を行うには、イベントをディスパッチします。Lightning Web コンポーネントは、DOM イベントを起動します。囲んでいる Lightning Web コンポーネントと同様に、囲んでいる Aura コンポーネントはこれらのイベントをリスンできます。囲んでいる Aura コンポーネントは、イベントを捕捉して処理できます。必要に応じて、Aura コンポーネントは Aura イベントを起動し、他の Aura コンポーネントやアプリケーションコンテナと通信できます。

このコードは、lwc-recipes リポジトリの categoryFilter コンポーネントと auraDomEventListener コンポーネントから引用されています。

次の例は、この手法を示しています。この Lightning Web コンポーネントは JavaScript ファイルでカスタム filterchange イベントを起動します。

囲んでいる Aura コンポーネントのラッパーはカスタムイベントにハンドラを追加します。イベントハンドラ onfilterchange は「on」のプレフィックスが付いたイベント名と一致します。つまり、onfilterchange を使用して、filterchange という名前のイベントを処理します。

onfilterchange ハンドラは、DOM イベントが伝達する最初の Aura コンポーネントでのみ指定できます。

Aura コンポーネントのコントローラは、イベントを受信します。イベントは好きなように処理できます。このコンポーネントは、Lightning Web コンポーネントイベントの details プロパティで渡される filters 配列を操作します。必要に応じて、新しい Aura イベントを起動して他の Aura コンポーネントと通信することもできます。

関連トピック