【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 |       コンーポネント|

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

```xml:appEventApp.app
<!-- アプリケーションイベントを処理するサンプル -->
<aura:application>
	<c:appEventSender />
	<c:appEventReceiver />
</aura:application>
```
```xml:appEventMessage.evt
<!-- アプリケーションイベント イベント -->
<aura:event type="APPLICATION">
	<aura:attribute name="text" type="String" />
</aura:event>
```
```xml: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>
```
```js:appEventReceiverController.js
({
  answer: function(component, event, handler) {
    var text = event.getParam('text');
    component.set('v.myText', text);
  }
})
```
```xml: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>
```
```js:appEventSenderController.js
({
  send: function(component, event, helper) {
    var text = event.getSource().get('v.label');
    $A.get('e.c:appEventMessage').setParams({
      'text': text
    }).fire();
  }
})
```
```xml:cmpEventApp.app
<!-- コンポーネントイベントを処理するサンプル -->
<aura:application>
	<c:cmpEventReceiver />
</aura:application>
```
```xml:cmpEventMessage.evt
<!-- コンポーネントイベント イベント -->
<aura:event type="COMPONENT">
	<aura:attribute name="text" type="String" />
</aura:event>
```
```xml: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>
```
```js:cmpEventReceiverController.js
({
  answer: function(component, event, handler) {
    var text = event.getParam('text');
    component.set('v.myText', text);
  }
})
```
```xml: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>
```
```js: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: イベント処理の基本](https://qiita.com/zaki-yama/items/aa557167d7769175c185)

# 参考資料
[Lightning Component: イベント処理の基本](https://qiita.com/zaki-yama/items/aa557167d7769175c185)