子コンポーネントのプロパティの設定

コンテインメント階層の下位と通信するには、オーナーは子コンポーネントのプロパティを設定します。HTML の属性は、JavaScript ではプロパティ割り当てに変換されます。

オーナー c-todo-app が c-todo-item の 2 つのインスタンスで公開プロパティを設定する方法を見てみましょう。

todoItem.js を確認します。@api デコレータは、itemName フィールドを公開プロパティとして公開します。

1// todoItem.js
2import { LightningElement, api } from "lwc";
3export default class TodoItem extends LightningElement {
4  @api itemName;
5}

公開 itemName プロパティを設定するために、todoApp.html は各 c-todo-item コンポーネントの item-name 属性を設定します。

1<!-- todoApp.html -->
2<template>
3  <c-todo-item item-name="Milk"></c-todo-item>
4  <c-todo-item item-name="Bread"></c-todo-item>
5</template>

JavaScript 内のプロパティ名はキャメルケースですが、HTML 属性名はケバブケース (ダッシュ区切り) になっており HTML 標準と一致します。todoApp.html では、マークアップ内の item-name 属性は、c-todo-item の itemName JavaScript プロパティに対応付けられます。

この例では、Milk と Bread の静的値を使用しますが、通常、現実世界のコンポーネントでは、オーナーの JavaScript ファイル todoApp.js 内で計算されたコレクションで for:each 反復を使用します。

これよりも少し複雑な例については、lwc-recipes リポジトリの作成の基本的なレシピを参照してください。

lwc.dev (Lightning Web Components のオープンソース開発者サイト) のプレイグラウンドで同じようなコードでを試すこともできます。

Tip

関連トピック

The Japanese Summer '24 guide is now live

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