【Lightning Web Component】イベントの伝達の仕方

Developer

2020.07.21

この記事は約5分で読めます。

こんにちは、アンダーソンです。
今回はLWCでのイベントの伝達の仕方についてまとめました。

以前関連性のないコンポーネントに値を渡したりする
LightningMessageServiceについては書きましたが、
今回はコンポーネントをネストさせた際の子から親への
イベントの伝達の仕方になります。

LightningMessageServiceについては下記の記事でまとめています。

Contents

1 CustomEventとdispatchEvent
2 値を渡してみよう

CustomEventとdispatchEvent

まずは簡単なイベントのみを送信するコードをご紹介します。
今回はSampleComponentとParentSampleComponentという二つのコンポーネント
を用意し、SampleComponentからParentSampleComponentにイベントを送信する
という内容です。
イベントを受信したらBoolean値を変更して表示が切り替わります。

SampleComponent.js

import { LightningElement,api } from 'lwc';

export default class SampleComponent extends LightningElement {
    sendEvent(){
        const event = new CustomEvent('send');
        this.dispatchEvent(event);
    }
}

SampleComponent.html

<template>
    <lightning-button label="イベント送信!!" onclick={sendEvent}></lightning-button>
</template>

ParentSampleComponent.js

import { LightningElement, api } from 'lwc';

export default class ParentSampleComponent extends LightningElement {
    isChanged;
    
    change(){
        if ( this.isChanged ) {
            this.isChanged = false;
        } else {
            this.isChanged = true;
        }
    }
}

ParentSampleComponent.html

<template>
    <lightning-card>
        <div if:false={isChanged}>
            <p>isChangedは{isChanged}</p>
        </div>
        <div if:true={isChanged}>
            <p>isChangedは{isChanged}</p>
        </div>
    </lightning-card>
    <lightning-card>
    <c-sample-component onsend={change}></c-sample-component>
</lightning-card>
</template>

これでOKです。親側からイベントを参照する際は、new CustomEvent(‘send’);
で設定した、イベント名にonを付けます。
そこで受信する関数を設定することでその関数がイベントによって動くという
イメージです。

値を渡してみよう

次にイベントを介して値を渡してみます。
先ほどのSampleComponent.jsを少し変更します。

import { LightningElement,api } from 'lwc';

export default class SampleComponent extends LightningElement {
    name = 'アンダーソン';

    sendEvent(){
        if ( this.name == 'アンダーソン' ) {
            this.name = 'ブルックス';
        } else {
            this.name = 'アンダーソン';
        }

        const event = new CustomEvent('send', { detail: this.name });
        this.dispatchEvent(event);
    }
}

ParentSampleComponent.js

import { LightningElement, api } from 'lwc';

export default class ParentSampleComponent extends LightningElement {
    name = 'アンダーソン';
    isChanged;
    
    change(event){
        if ( this.isChanged ) {
            this.isChanged = false;
        } else {
            this.isChanged = true;
        }
        this.name = event.detail;
    }
}

これでOKです。
アンダーソンとブルックスが交互に入れ替わると思います。
親側の関数でeventを受信し、あらかじめ子のjsでdetailとして
入れておいた値を参照してセットする流れです。

しっかり基本を抑えておけば応用できると思います。
是非何か試してみてください！

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。