0
0

LWC 子コンポーネント 画面読み込み時の処理方法

Posted at

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を使うのがわかりやすくて良いのではという感想。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0