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); } }
④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
別になくてもできてたw恥
ちなみに、親の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>
おしまい
GitHub よく使うコマンドまとめ
・ローカルのプロジェクトをGitHubへアップロード
ローカルのプロジェクトをGitHubへアップロードする方法 - Qiita
・ブランチ作成~プッシュ
# ローカルのmasterブランチにいることを確認する git status # リモートブランチの状態を取り込む git pull # masterから新しいbranchを作成 (new-branch-nameという名前のブランチを、origin/masterブランチから分岐して作成) git checkout -b new-branch-name origin/master # なんか変更してコミット入れる git add . git commit -m "hoge" # remotes/origin の同名ブランチ ( remotes/origin/new-branch-name ) にpushする (なければ作成される) # https://qiita.com/Takao_/items/44d2aa23d6b1ab22a53a git push origin HEAD
おしまい
コンストラクタの中のthis
いまいちthisの意味がよくわからない
分かりやすくthis.nameと引数nameを同じ名前にしてるだけなのかなあ・・?
まじでわからないけど書いとくw
おしまい
LWC masterLabelタグ
すると・・
おしまい