Zenn
🎃

LWCでコンポーネント表示を切替える

2023/09/19に公開
Salesforce
LWC
コンポーネント
画面遷移
lightningwebcomp
tech

はじめに

LWCを実装中ですが、コンポーネントの遷移が必要な場合どうすればいいのかわからなかったので調べて実装してみました。
今回は親コンポーネント内での子コンポーネント同士の切替えです。

この記事でわかること

  1. 子コンポーネントの遷移

イメージ

親コンポーネントの中にある子コンポーネントの表示を切替える

切替え後は以下の様になる

手順

①子コンポーネントを作成

今回はコンポーネントを切替えるためのボタンと
コンポーネントのタイトルを表示するだけの簡単なコンポーネントを作成する。
・childCompA
・childCompB

②親コンポーネントを作成

子コンポーネントを表示するだけのコンポーネントを作成する。
・parentComp

③子コンポーネントのhtmlを記載

・childCompA

<template>
  <button class="button" onclick={handleChangeComponent}>
    ChildComponentBに切替える
  </button>
  <h1>ChildComponentA</h1>
</template>

・childCompB

<template>
  <button class="button" onclick={handleChangeComponent}>
    ChildComponentAに切替える
  </button>
  <h1>ChildComponentB</h1>
</template>

④子コンポーネントのjavascriptを記載(ボタン押下時のイベント)

カスタムイベントを生成してイベントを実行する。

detail（任意）: イベントに関連付ける詳細データ。
これはカスタムイベントの詳細情報を格納するためのもので、任意のJavaScriptデータを含むことができます。

・childCompA

import { LightningElement } from "lwc";

export default class ChildCompA extends LightningElement {
  handleChangeComponent() {
    const event = new CustomEvent("changecomponentfirst", {
      detail: "childCompB"
    });
    this.dispatchEvent(event);
  }
}

・childCompB

import { LightningElement } from "lwc";

export default class ChildCompB extends LightningElement {
  handleChangeComponent() {
    const event = new CustomEvent("changecomponentsecond", {
      detail: "childCompA"
    });
    this.dispatchEvent(event);
  }
}

⑤親コンポーネントのhtmlを記載

子コンポーネントのカスタムイベントが呼び出されたら、親コンポーネントのメソッドが呼び出される。
・parentComp

<template>
  <!-- chilidCompA -->
  <template if:true={showFirstComponent}>
    <c-child-comp-a
      onchangecomponentfirst={handleChangeComponentFirst}
    ></c-child-comp-a>
  </template>

  <!-- childCompB -->
  <template if:true={showSecondComponent}>
    <c-child-comp-b
      onchangecomponentsecond={handleChangeComponentSecond}
    ></c-child-comp-b>
  </template>
</template>

⑥親コンポーネントのjavascriptでメソッドを記載。

デフォルトではshowFirstComponent(childCompA)を表示させ、
showSecondComponent(childCompB)は表示させない。
メソッドが実行される度に表示が切り替えられる様に実装。
・parentComp

import { LightningElement } from "lwc";

export default class ParentComp extends LightningElement {
  showFirstComponent = true;
  showSecondComponent = false;

  // childCompAで切替えボタンがクリックされたときに呼び出されるメソッド
  handleChangeComponentFirst(event) {
    const componentName = event.detail;
    if (componentName === "childCompB") {
      this.showFirstComponent = false;
      this.showSecondComponent = true;
    }
  }
  // childCompBで切替えボタンがクリックされたときに呼び出されるメソッド
  handleChangeComponentSecond(event) {
    const componentName = event.detail;
    if (componentName === "childCompA") {
      this.showFirstComponent = true;
      this.showSecondComponent = false;
    }
  }
}

⑦親コンポーネントをSalesforceに組み込む。

⑧挙動確認。

ちゃんと動いていることが確認できました。

Discussion