SalesForceのLWCについて、
親コンポーネントから子コンポーネントを呼び出すときに、親から与えられた引数を条件に子の画面表示を変えるという課題があった。
パッと思いついた方法が以下。
・constructor
・connectedCallback等のcallback
・getter
それぞれで動くのか検証してみた。
検証ではmodalを子コンポーネントとして使用。
myModal.js
import { api } from 'lwc';
import LightningModal from 'lightning/modal';
export default class MyModal extends LightningModal {
@api content;//親コンポーネントから渡された値
// constructor
check_const = false;
constructor() {
super();
if( this.content = "test" ){ this.check_const = true; }
}
// callback
check_callback = false;
connectedCallback() {
if( this.content = "test" ){ this.check_callback = true; }
}
// getter
get check_getter(){
if( this.content = "test" ){ return true; }
}
}
myModal.html
<template>
<lightning-modal-header label="My Modal Heading"></lightning-modal-header>
<lightning-modal-body>
<template lwc:if={check_const}>constructor</template>
<br>
<template lwc:if={check_callback}>callback</template>
<br>
<template lwc:if={check_getter}>getter</template>
</lightning-modal-body>
</template>
結果、すべて動作した。
どれが正しいのかは状況によるのだろうが、普通にcallbackを使うのがわかりやすくて良いのではという感想。