囲んでいる Aura コンポーネントへのイベントの送信

子から親への通信を行うには、イベントをディスパッチします。Lightning Web コンポーネントは、DOM イベントを起動します。囲んでいる Lightning Web コンポーネントと同様に、囲んでいる Aura コンポーネントはこれらのイベントをリスンできます。囲んでいる Aura コンポーネントは、イベントを捕捉して処理できます。必要に応じて、Aura コンポーネントは Aura イベントを起動し、他の Aura コンポーネントやアプリケーションコンテナと通信できます。

例

このコードは、lwc-recipes リポジトリの categoryFilter コンポーネントと auraDomEventListener コンポーネントから引用されています。

次の例は、この手法を示しています。この Lightning Web コンポーネントは JavaScript ファイルでカスタム filterchange イベントを起動します。

1// categoryFilter.js
2import { LightningElement } from "lwc";
3
4export default class CategoryFilter extends LightningElement {
5  handleCheckboxChange() {
6    // Get the labels of selected checkboxes
7    const filters = Array.from(
8      this.template.querySelectorAll("lightning-input")
9    )
10      .filter((element) => element.checked)
11      .map((element) => element.label);
12    const filterChangeEvent = new CustomEvent("filterchange", {
13      detail: { filters },
14    });
15    // Fire the custom event
16    this.dispatchEvent(filterChangeEvent);
17  }
18}

1<!-- categoryFilter.html -->
2<template>
3  <lightning-input
4    label="Category 1"
5    type="checkbox"
6    onchange={handleCheckboxChange}
7  ></lightning-input>
8  <lightning-input
9    label="Category 2"
10    type="checkbox"
11    onchange={handleCheckboxChange}
12  ></lightning-input>
13</template>

囲んでいる Aura コンポーネントのラッパーはカスタムイベントにハンドラを追加します。イベントハンドラ onfilterchange は「on」のプレフィックスが付いたイベント名と一致します。つまり、onfilterchange を使用して、filterchange という名前のイベントを処理します。

1<!-- auraDomEventListener.cmp -->
2<aura:component implements="flexipage:availableForAllPageTypes">
3    <aura:attribute name="message" type="String" default="No selection"/>
4
5    <lightning:card title="AuraDomEventListener" iconName="custom:custom30">
6        <aura:set attribute="actions">
7            <span class="aura">Aura Component</span>
8        </aura:set>
9        <div class="slds-m-around_medium">
10            <lightning:layout>
11                <lightning:layoutItem size="4">
12                    <!-- This is an LWC component -->
13                    <c:categoryFilter onfilterchange="{!c.handleFilterChange}"/>
14                </lightning:layoutItem>
15                <lightning:layoutItem size="8" class="slds-p-left_medium">
16                    {!v.message}
17                </lightning:layoutItem>
18            </lightning:layout>
19        </div>
20    </lightning:card>
21</aura:component>

onfilterchange ハンドラは、DOM イベントが伝達する最初の Aura コンポーネントでのみ指定できます。

Note

Aura コンポーネントのコントローラは、イベントを受信します。イベントは好きなように処理できます。このコンポーネントは、Lightning Web コンポーネントイベントの details プロパティで渡される filters 配列を操作します。必要に応じて、新しい Aura イベントを起動して他の Aura コンポーネントと通信することもできます。

1// auraDomEventListenerController.js
2({
3  handleFilterChange: function (component, event) {
4    var filters = event.getParam("filters");
5    component.set(
6      "v.message",
7      filters.length > 0 ? "Your selection: " + filters.join() : "No selection"
8    );
9  },
10});

関連トピック

イベントを使用した通信

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。