LWCで孫から親に直接イベント伝達する【Salesforce】

Lightning Web Component で発生させたイベントを、２つ上の階層（またはそれ以上）にあるコンポーネントに伝達する方法について、意外と楽に実装できたので連携します。

実装のポイント
実装例
注意点

実装のポイント

LWCでイベントを発生させる際、通常は１つ上のコンポーネントまでしかイベントを伝達できません。

しかし、イベント作成時に bubbles: true, composed: true とすることでイベントはドキュメントのルートまで上に伝達するようになります。

実装例

component1 を親、component2 を子、component3 を孫として、component3 で発生させたイベントをcomponent1 で受け取って処理します。

import { LightningElement } from 'lwc';

export default class Component3 extends LightningElement {
    handleClick() {
        const event = new CustomEvent('clickaction',{detail:'aaa', bubbles: true, composed: true});
        this.dispatchEvent(event);
    }
}

<templete>
  <c-component3></c-component3>
</templete>

<templete>
  <c-component2 onclickaction={handleClick}></c-component2>
</templete>

import { LightningElement } from 'lwc';

export default class Component1 extends LightningElement {
    data;
    handleClick(event) {
        this.data = event.detail;
    }
}

注意点

イベントがDOMツリーのルートまで上に行くので、思わぬところでイベント名の競合が起こる可能性があります。(名前空間)__(イベント名) などのように、アンダースコアをつけるなどしてイベント名が競合しない様に注意する必要があります。