Public のプロパティ

公開プロパティを公開するには、項目を @api でデコレートします。公開プロパティではコンポーネントの API を定義します。テンプレートで使用される公開プロパティはリアクティブです。テンプレートで使用される公開プロパティの値が変更されると、コンポーネントは再表示されます。

コンポーネントが再表示されると、テンプレートで使用されている式が再評価され、renderedCallback() ライフサイクルフックが実行されます。

@api デコレーター

デコレーターは、JavaScript 言語の機能です。@api デコレーターは、Lightning Web コンポーネント独自のものです。1 つの項目には 1 つのデコレーターのみを付加できます。

@api デコレーターを lwc からインポートします。このコードは、itemName 項目を公開プロパティとして提供します。

itemName の値はテンプレートに表示されます。

この JavaScript クラスと HTML テンプレートは、c-todo-item コンポーネント (c は名前空間) を定義します。c-todo-item コンポーネントを使用するコンポーネントは、itemName プロパティを設定できます。

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

マークアップでコンポーネントを使用するオーナーコンポーネントは、DOM プロパティを介してコンポーネントの公開プロパティにアクセスできます。DOM プロパティは、クラスで宣言される公開項目です。これらは、DOM 要素を介してドット表記でアクセスできます。この例では、コンポーネント c-todo-item は公開項目を @api itemName として宣言しており、この項目の値には c-todo-item のインスタンス (DOM 要素) 上で DOM プロパティを介してアクセスできます。

lwc-recipes リポジトリの CompositionBasics の例を参照してください。

関連トピック