こんにちは、アンダーソンです。
今回はLWCでのgetterとsetterの使い方についてまとめました。
LWCでのというかJavaScriptでの使い方になってくるんですが、
オブジェクトにおけるgetter,setterでなくても使えるので、
その辺りも合わせて見ていこうと思います。
Contents
getterで値を取得する
getterはget 変数名(){}の形で宣言して、
HTML側では{変数名}と言った形で参照することが可能です。
下記はボタンを押下して表示を変更する例です。
<template>
<lightning-card>
<div>{name}</div>
<lightning-button label="変更" onclick={Change}></lightning-button>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
export default class ParentSampleComponent extends LightningElement {
isChanged = false;
get name(){
if ( this.isChanged ) {
return 'アンダーソン';
} else {
return 'ブルックス';
}
}
Change(){
if ( this.isChanged ) {
this.isChanged = false;
} else {
this.isChanged = true;
}
}
}
ボタンを押すことでisChangedが切り替わります。
その都度getterのNameは切り替わり、アンダーソンとブルックスが切り替わるという
ロジックです。
このようにすれば簡単に変数を動的に変更できます。
setterで値を設定する
setterを使う時は基本的に@apiとの組み合わせになります。
例えば、親コンポーネントで選んだ値を元に対象のsetterに値をセットし返す
と言った形で使うことができます。
import { LightningElement, api } from 'lwc';
export default class ParentSampleComponent extends LightningElement {
fullName;
@api
get name(){
return this.fullName;
}
set name(value){
this.fullName = value;
}
}
このNameという変数に対して親コンポーネントから値を入れてあげれば、
それがセットされるのでそのまま値として返却されます。
単独のコンポーネントだけでの判定しかない場合はgetterのみでOKです。
親コンポーネントなどとの絡みが出てきて、子コンポーネントの値を
動的に変更したい際などはsetterを書く必要が出てきますので、
覚えておきましょう。