LWC setterがいつ動くのかよくわからないから試してみた
いつまでたってもgetterとsetterがよくわからない・・
のに、LWCでの使い方とかもっとわからない・・
から、試してみた。
今回は3つのコンポーネントを組み合わせています。
完成形態
初期表示
入力フォームになんか入れて
ボタンを押すと、setterを使って値が表示されます
parentSetter.htmlの中に2つのコンポーネントが含まれています。
ソース
わたしまじで命名もへたくそで本当萎える(;;)
parentSetter.html
<template> <lightning-card> <c-action-setter onsend={putValueSetter}></c-action-setter> <c-set-setter receive-value={value}></c-set-setter> </lightning-card> </template>
parentSetter.js
import { LightningElement } from 'lwc'; export default class ParentSetter extends LightningElement { value; putValueSetter(evt){ this.value = evt.detail; } }
setSetter.html
<template> <div>displayValue:{displayValue}</div> </template>
setSetter.js
import { LightningElement,api } from 'lwc'; export default class SetSetter extends LightningElement { displayValue; set receiveValue(val){ if(this.displayValue === undefined){ this.displayValue = '初期表示'; }else{ this.displayValue = val; } } @api get receiveValue(){ } }
actionSetter.html
<template> <lightning-input label="せったーにせっとしたいあたいをいれてね" value={inputValue} onchange={changeInputValue}></lightning-input> <lightning-button label="せったーうごかすぼたん" onclick={buttonClick}></lightning-button> </template>
actionSetter.js
import { LightningElement } from 'lwc'; export default class ActionSetter extends LightningElement { inputValue; changeInputValue(event) { this.inputValue = event.target.value; } buttonClick(){ const event = new CustomEvent('send',{ detail: this.inputValue }); this.dispatchEvent(event); } }
setterを使って値を入れるまでの挙動
①入力フォームに値を入れる
②onchangeでchangeInputValueに入り、this.inputValueに入力した値が入る(actionSetter.js)
参考:LWC onchangeはいつ動いている? - ぽっさむのプログラミングまじでわかんないブログ
③ボタンを押す
④onclickでbuttonClickに入り、detailプロパティにthis.inputValueをセットしたイベントを作成してディスパッチする(actionSetter.js)
参考:LWC 子から親へイベント伝達してみた - ぽっさむのプログラミングまじでわかんないブログ
⑤sendにonを付けたonsendが反応して、putValueSetterが呼び出される(parentSetter.js)
⑥this.value = evt.detail;でthis.valueにdetailプロパティにセットした値(フォームに入力した値)が入り、receiveValueに値がセットされた状態になる
receive-value={value}のvalueに値が入るということは、receiveValueという変数に値がはいることなんだってぇ~!!(多分)
なのでここで、
⑦セッター(set receiveValue(val){・・・)が動く。valは、this.value。
setSetter.js
import { LightningElement,api } from 'lwc'; export default class SetSetter extends LightningElement { displayValue; set receiveValue(val){ if(this.displayValue === undefined){ this.displayValue = '初期表示'; }else{ this.displayValue = val; } } @api get receiveValue(){ } }
⑧this.displayValueには'初期表示'が入っているため、elseに入って、this.displayValueに値が入り、表示される。
ちなみに、読み込んだだけで’初期表示’って表示されてるから、読み込んだ瞬間にsetterは動いてることが分かった。
知らなかった・・。※displayValue;って宣言しただけの場合の中身はundefined。
ここまで書いたけど、setterってあんまり使わないらしいね。
いまんとこ、こういう風に値渡すのもどこが便利なのかいまいちピンとこない。
でも、親から子どもに対して値が渡せるんだ~っていうのは分かった。
ちなみに、setterを使うときは@apiをつけなきゃいけないらしいよ。しかも謎にgetterのほうにつけろって書いてあった。
作法的な?あと、setterはgetterがないとエラーになる。だからgetterは空だけど置いておきました。
やっぱりプログラミング全然わからなくて草。
おしまい