Public のプロパティ

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

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

@api デコレータ

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

Tip

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

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

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

1<!-- todoItem.html -->
2<template>
3  <div class="view">
4    <label>{itemName}</label>
5  </div>
6</template>

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

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

Note

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

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

1// todoApp.js
2myItem = this.template.querySelector("c-todo-item").itemName;

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

Tip

関連トピック

The Japanese Summer '24 guide is now live

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