【salesforce】Lightning基本知識ーLightningコンポーネント間通信（イベント）

Lightningコンポーネント間通信（イベント）

　　本セクションには、Lightningコンポーネント間通信用の部品イベントを紹介します。
　　Lightningコンポーネントはセキュリティ強化のため、完全にカプセル化しましたので、Lightningコンーポネント間は直接通信ができません。Lightningコンーポネント間通信できるため、イベントプラットフォームを利用しています。

イベントの分類

1. アプリケーションイベント
2. コンポーネントイベント

実装例

下記Lightningアプリケーション、コンーポネント、イベントを作成します。

No.	Right align	Center align
1	appEventApp	Lightningアプリケーション
2	appEventMessage	イベント
3	appEventReceiver	コンーポネント
4	appEventSender	コンーポネント
5	cmpEventApp	Lightningアプリケーション
6	cmpEventMessage	イベント
7	cmpEventReceiver	コンーポネント
8	cmpEventSender	コンーポネント

ソースコードは下記の通り

appEventApp.app

<!-- アプリケーションイベントを処理するサンプル -->
<aura:application>
	<c:appEventSender />
	<c:appEventReceiver />
</aura:application>

appEventMessage.evt

<!-- アプリケーションイベント イベント -->
<aura:event type="APPLICATION">
	<aura:attribute name="text" type="String" />
</aura:event>

appEventReceiver.cmp

<!-- アプリケーションイベント　受信側コンポーネント -->
<aura:component>
	<aura:attribute name="myText" type="String" default="None" />
	<aura:handler event="c:appEventMessage" action="{!c.answer}" />
	Message: {!v.myText}
</aura:component>

appEventReceiverController.js

({
  answer: function(component, event, handler) {
    var text = event.getParam('text');
    component.set('v.myText', text);
  }
})

appEventSender.cmp

<!-- アプリケーションイベント　送信側コンポーネント -->
<aura:component>
	<aura:registerEvent name="messageEvent" type="c:appEventMessage" />
	<ui:button label="1" press="{!c.send}" />
	<ui:button label="2" press="{!c.send}" />
</aura:component>

appEventSenderController.js

({
  send: function(component, event, helper) {
    var text = event.getSource().get('v.label');
    $A.get('e.c:appEventMessage').setParams({
      'text': text
    }).fire();
  }
})

cmpEventApp.app

<!-- コンポーネントイベントを処理するサンプル -->
<aura:application>
	<c:cmpEventReceiver />
</aura:application>

cmpEventMessage.evt

<!-- コンポーネントイベント イベント -->
<aura:event type="COMPONENT">
	<aura:attribute name="text" type="String" />
</aura:event>

cmpEventReceiver.cmp

<!-- コンポーネントイベント　受信側コンポーネント -->
<aura:component>
	<aura:attribute name="myText" type="String" default="None" />
	<c:cmpEventSender messageEvent="{!c.answer}" />
	<p> This is Receiver's message: {!v.myText} </p>
</aura:component>

cmpEventReceiverController.js

({
  answer: function(component, event, handler) {
    var text = event.getParam('text');
    component.set('v.myText', text);
  }
})

cmpEventSender.cmp

<!-- コンポーネントイベント　送信側コンポーネント -->
<aura:component>
	<aura:attribute name="myText" type="String" default="None" />
	<aura:registerEvent name="messageEvent" type="c:cmpEventMessage" />
	<aura:handler name="messageEvent" action="{!c.answer}" />
	<ui:button label="1" press="{!c.send}" />
	<ui:button label="2" press="{!c.send}" />
	<p> This is Sender's message: {!v.myText}</p>
</aura:component>

cmpEventSenderController.js

({
  send: function(component, event, helper) {
    var messageEvent = component.getEvent('messageEvent');
    var text = event.getSource().get('v.label');
    messageEvent.setParams({
      'text': text
    }).fire();
  },
  answer: function(component, event, helper) {
    var text = event.getParam('text');
    component.set('v.myText', text);
  }
})

詳細説明は下記記事をご覧ください。
Lightning Component: イベント処理の基本

参考資料

Lightning Component: イベント処理の基本