Public のプロパティ
公開プロパティを公開するには、フィールドを @api でデコレートします。公開プロパティではコンポーネントの API を定義します。テンプレートで使用される公開プロパティはリアクティブです。テンプレートで使用される公開プロパティの値が変更されると、コンポーネントは再表示されます。
コンポーネントが再表示されると、テンプレートで使用されている式が再評価され、renderedCallback() ライフサイクルフックが実行されます。
@api デコレータを lwc からインポートします。このコードは、itemName フィールドを公開プロパティとして提供します。
itemName の値はテンプレートに表示されます。
この JavaScript クラスと HTML テンプレートは、c-todo-item コンポーネント (c は名前空間) を定義します。c-todo-item コンポーネントを使用するコンポーネントは、itemName プロパティを設定できます。
JavaScript 内のプロパティ名はキャメルケースですが、HTML 属性名はケバブケース (ダッシュ区切り) になっており HTML 標準と一致します。todoApp.html では、マークアップ内の item-name 属性は、c-todo-item の itemName JavaScript プロパティに対応付けられます。
マークアップでコンポーネントを使用するオーナーコンポーネントは、DOM プロパティを介してコンポーネントの公開プロパティにアクセスできます。DOM プロパティは、クラスで宣言される公開フィールドです。これらは、DOM 要素を介してドット表記でアクセスできます。この例では、コンポーネント c-todo-item は公開フィールドを @api itemName として宣言しており、このフィールドの値には c-todo-item のインスタンス (DOM 要素) 上で DOM プロパティを介してアクセスできます。
lwc-recipes リポジトリの CompositionBasics の例を参照してください。
関連トピック