イベントを使用した通信

Lightning Web コンポーネントは、標準 DOM イベントをディスパッチします。コンポーネントは、カスタムイベントを作成してディスパッチすることもできます。コンポーネントのコンテインメント階層の上位と通信するには、イベントを使用します。たとえば、子コンポーネントの c-todo-item は、イベントをディスパッチして、その親である c-todo-app に、ユーザがそれを選択したことを通知します。

Lightning Web コンポーネントのイベントは、すべてのブラウザで利用できる API とオブジェクトのコレクションである DOM イベントの上に構築されています。

DOM イベントシステムは、次の要素を含むプログラミング設計パターンです。

  • イベント名 (イベント種別)
  • イベントの初期化設定
  • イベントを生成する JavaScript オブジェクト

イベントを作成するには、CustomEvent インターフェースを使用することを強くお勧めします。Lightning Web コンポーネントでは、CustomEvent によってブラウザ間でのエクスペリエンスの一貫性を高めることができます。設定や定型は不要で、あらゆる種類のデータを detail プロパティで渡せるため、柔軟な動作が可能です。

Lightning Web コンポーネントは、イベントのディスパッチ、リスン、処理を行うための EventTarget インターフェースを実装します。

コンポーネントの包含階層での下方向への通信は、HTML 属性でプロパティを子に渡すか、または公開メソッドをコールすることで行います。コンポーネント間で通信を行うには、Lightning Message Service または publish-subcribe ユーティリティを使用します。

関連トピック