開発者は、親 Lightning Web コンポーネント内にネストされた子 Lightning Web コンポーネントを作成しました。親コンポーネントは、子コンポーネントに文字列値を渡す必要があります。 これを実現するにはどの 2 つの方法がありますか? 2つの回答を選択してください
正解:A,B
Public Method (A):The parent component can call a public method defined in the child component to pass data directly. Reference:LWC Communication: Public Methods Public Property (B):The parent component can bind data to a public property in the child component using the attribute syntax. Reference:LWC Communication: API Properties Incorrect Options: C:Apex controllers are not used for direct communication between parent and child components. D:Custom events are used for communication from child to parent, not parent to child.
最新のコメント (最新のコメントはトップにあります。)
正解は **A** と **B** です。
### 領域の確認
* **領域:** **3. ユーザーインターフェース (User Interface)**
* **トピック:** Lightning Web Components (LWC)、コンポーネント間通信、`@api` デコレータ
-----
### 正解の解説
LWCにおける「親から子へ (Parent to Child)」のデータ受け渡しの鉄則は **「プロパティは下り、イベントは上る (Properties down, Events up)」** です。
**B. 親コンポーネントはパブリックプロパティを使用して子コンポーネントにデータを渡すことができます。**
これが最も基本的で一般的な方法です。
* **子側 (Child):** 変数に `@api` デコレータを付けて「パブリック(公開)」にします。
```javascript
// child.js
import { LightningElement, api } from 'lwc';
export default class Child extends LightningElement {
@api message; // 親からセットされるのを受け付ける
}
```
* **親側 (Parent):** HTMLの中で属性として値を渡します。
```html
<c-child message="こんにちは"></c-child>
```
**A. 親コンポーネントは子コンポーネント内のパブリック メソッドを呼び出すことができます。**
これは「メソッド経由」でデータを渡す方法です。
* **子側 (Child):** メソッドに `@api` を付けて公開します。
* **親側 (Parent):** JavaScript で `querySelector` を使って子コンポーネントを取得し、そのメソッドを実行します。
```javascript
// parent.js
const child = this.template.querySelector('c-child');
child.handleData('文字列データを渡す');
```
-----
### 不正解の解説
**D. 親コンポーネントはカスタム イベントを使用して、子コンポーネントにデータを渡すことができます。**
これは **不正解** です。
カスタムイベント (`CustomEvent`) は、逆方向、つまり **「子から親へ (Child to Parent)」** 通信するために使われます。イベントは下から上へバブリング(上昇)しますが、上から下へは流れません。
**C. 親は Apex コントローラ クラスを使用して子コンポーネントにデータを送信できます。**
これは **不正解** です。
Apex は Salesforce データベースとのやり取りに使用するサーバーサイド言語です。ブラウザ上にあるコンポーネント同士(親と子)が通信するために、わざわざサーバ...