開発者は、複数の Lightning Web コンポーネントを含むアプリを作成しています。 子コンポーネントの 1 つはナビゲーションの目的で使用されます。ユーザーが子コンポーネントの「次へ」というボタンをクリックすると、親コンポーネントに通知して次のページに移動できるようにする必要があります。 これをどのように達成すればよいでしょうか?
正解:D
To notify the parent component when the child component'sNextbutton is clicked, the child component can dispatch a custom event. The parent component listens to this event and handles navigation accordingly. Reference:Custom Events in LWC Incorrect Options: A:Properties in LWC are one-way data-bound; updates do not notify parents. B:Calling an Apex method is unnecessary for parent-child communication. C:Notifications are not a feature in LWC for component communication.
最新のコメント (最新のコメントはトップにあります。)
正解は **D** です。
これは、少し前に解説した「親から子へ」の問題の**逆パターン(子から親へ)** です。セットで覚えると完璧です。
### 領域の確認
* **領域:** **3. ユーザーインターフェース (User Interface)**
* **トピック:** Lightning Web Components (LWC)、コンポーネント間通信、カスタムイベント
-----
### 正解の解説
**D. カスタム イベントを作成します (Create a custom event)**
LWC におけるコンポーネント間通信の鉄則 **「プロパティは下り、イベントは上り (Properties down, Events up)」** の「上り」の部分です。
子コンポーネント内で何かが起きた(ボタンが押された等)ことを親に知らせるには、子側で **カスタムイベントを発行 (dispatch)** し、親側でそれを **リッスン (listen/catch)** します。
**実装の流れ:**
1. **子 (Child.js):** イベントを作成して発射します。
```javascript
handleClick() {
// 'next' という名前のイベントを作成して発行
const event = new CustomEvent('next');
this.dispatchEvent(event);
}
```
2. **親 (Parent.html):** 子タグ上でイベント待ち受け (`onイベント名`) を記述します。
```html
<c-child onnext={handleNext}></c-child>
```
3. **親 (Parent.js):** ハンドラメソッドで処理(ページ移動など)を行います。
```javascript
handleNext() {
// 次のページへ行く処理
}
```
-----
### 不正解の解説
**A. 親のプロパティを更新します。**
これは **不正解** です。
LWCのデータフローは「単方向(親→子)」です。子コンポーネントから、親が持つ変数を直接書き換えることは禁止されています(Read-only)。
**B. Apex コントローラ内のメソッドを呼び出します。**
これは **不正解** です。
Apex はサーバーサイド(Salesforceのデータベース側)の処理です。ブラウザ上のコンポーネント同士(親と子)が会話するために、わざわざサーバーを経由する必要はありませんし、Apex自体に「親コンポーネントに通知を送る」という機能はありません。
**C. 通知を発行します。**
これは **不正解** です。
ここで言う「通知 (Notification)」とは、通常 `ShowToastEvent`(画面上部に「保存しました」などのメッセージを出す機能)を指します。これはユーザーへのメ...