インスタンス化されたコンポーネントのコンポーネントイベントの処理

例を見てみましょう。c:child は、マークアップに <aura:registerEvent> を使用して、sampleComponentEvent イベントを起動できるように登録します。

1<!-- c:child -->
2<aura:component>
3    <aura:registerEvent name="sampleComponentEvent" type="c:compEvent"/>
4</aura:component>

c:parent は、マークアップで c:child をインスタンス化するときに、このイベントのハンドラを設定します。

1<!-- parent.cmp -->
2<aura:component>
3    <c:child sampleComponentEvent="{!c.handleChildEvent}"/>
4</aura:component>

c:parent は次の構文を使用して、c:child によって起動された sampleComponentEvent イベントのハンドラを設定します。

1<c:child sampleComponentEvent="{!c.handleChildEvent}"/>

この構文は、sampleComponentEvent と呼ばれる属性を設定する方法と似ています。ただし、この場合、sampleComponentEvent は属性ではありません。sampleComponentEvent は、c:child で宣言されたイベント名と一致します。

1<aura:registerEvent name="sampleComponentEvent" type="c:compEvent"/>

上記の構文は、コンポーネントがイベントのハンドラを宣言する通常の方法の便利なショートカットです。親コンポーネントは、直系子孫からのイベントを処理する場合にのみに、この構文を使用できます。c:parent であなたがイベントを処理することを明示的に示す場合、またはコンポーネント階層の下位にあるコンポーネントによってイベントが起動される可能性がある場合は、<c:child> 内でハンドラを宣言する代わりに、<aura:handler> タグを使用します。

1<!-- parent.cmp -->
2<aura:component>
3    <aura:handler name="sampleComponentEvent" event="c:compEvent"
4      action="{!c.handleSampleEvent}"/>
5    <c:child />
6</aura:component>

2 つのバージョンの c:parent マークアップは同じ動作をします。ただし、<aura:handler> を使用すると、あなたが sampleComponentEvent イベントを処理するということがより明確になります。