子コンポーネントのプロパティの設定
コンテインメント階層の下位と通信するには、オーナーは子コンポーネントのプロパティを設定します。HTML の属性は、JavaScript ではプロパティ割り当てに変換されます。
オーナー c-todo-app が c-todo-item の 2 つのインスタンスで公開プロパティを設定する方法を見てみましょう。
todoItem.js を確認します。@api デコレータは、itemName フィールドを公開プロパティとして公開します。
公開 itemName プロパティを設定するために、todoApp.html は各 c-todo-item コンポーネントの item-name 属性を設定します。
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 のオープンソース開発者サイト) のプレイグラウンドで同じようなコードでを試すこともできます。
関連トピック