LWC 子から親へイベント伝達してみた

こちらの記事を参考にやってみました。ソースはちょっぴり違うかも
【Lightning Web Component】イベントの伝達の仕方 | SFDCの一番星

完成形態

初期表示

ボタンを押すと名前はうんちまんになる

もう一度押すと名前はぽっさむ☆彡に変わる

以後、交互に表示される

ちなみに上のコンポーネントが親で下が子どもです。（汚い）

ソース

oya.html

<template>
    <lightning-card>
        <div>
            <p>名前は{name}</p>
        </div>
    </lightning-card>
    <lightning-card>
    <c-kodomo onsend={change}></c-kodomo>
</lightning-card>
</template>

oya.js

import { LightningElement, track } from 'lwc';

export default class ParentSampleComponent extends LightningElement {
    @track name = 'まだない';
    
    change(event){
        this.name = event.detail;
    }
}

kodomo.html

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

kodomo.js

import { LightningElement } 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);
    }
}

イベントの流れ

①イベント送信!!ボタンを押下する

②onclickでsendEventが呼び出される

③this.nameにはすでに’ぽっさむ☆彡’が入っているため、elseに入ってthis.nameの中身は’うんちまん’になる。
それからイベントを作成して、ディスパッチする。

・・・急に言葉むずいけど、
sendイベントをdetailプロパティ付きでセットする（イベント作成）： const event = new CustomEvent('send', { detail: this.name });
呼び出す（ディスパッチ）：this.dispatchEvent(event);
的な感じっぽい。

kodomo.js

import { LightningElement } 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);
    }
}

参考：Component Library

④c-kodomoタグのsendにonを付けたonsend={change}が反応して、changeが呼び出される

kodomo.js

oya.html

oya.js

import { LightningElement, track } from 'lwc';

export default class ParentSampleComponent extends LightningElement {
    @track name = 'まだない';
    
    change(event){
        this.name = event.detail;
    }
}

⑤this.nameにdetailプロパティにセットした値が入り、表示が切り替わる。

ちなみにchange(event)のeventには、そのイベントに関する情報がほかにもたくさん入っています。

eventでもevtでもaaaでも何でもいいんだけど、とりあえず第一引数にイベントの情報が入っているらしい。

参考：JavaScript | 発生したイベントの情報を取得する(Event)

参考：イベントの作成と起動 - イベントリファレンス | MDN

@trackをつけたから、変数の内容が変更された時にHTMLが再描画されて、リアルタイムで表示が変わるよ。
参考：Lightning Web Components（JS） - Qiita

別になくてもできてたｗ恥

ちなみに、親のxmlファイルをこんな感じにしないとコンポーネントに追加できませんよ。そんなの知ってるよね・・みんなは（煽り）

oya.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

おしまい