属性の移行

Aura コンポーネントの <aura:attribute> タグの属性を Lightning Web コンポーネントの JavaScript プロパティに移行します。

Aura コンポーネントの myAttribute 属性を見てみましょう。

1<aura:component>
2  <aura:attribute name="myAttribute" default="Hello" />
3</aura:component>

Lightning Web コンポーネントでは、代わりに myAttribute という JavaScript プロパティを使用します。

1// myComponentName.js
2import { LightningElement, api } from "lwc";
3export default class MyComponentName extends LightningElement {
4  @api myAttribute = "Hello";
5}

@api デコレータは myAttribute を公開プロパティとして定義します。「公開プロパティ」を参照してください。

コンポーネントの HTML ファイルでプロパティを参照します。

1<!-- myComponentName.html -->
2<template> {myAttribute} </template>

Lightning Web コンポーネントの Boolean 属性値は、true および false 値を指定せずにマークアップで設定されます。この値は、属性が存在するか (true)、否か (false) によって設定されます。JavaScript では、動的計算値を使用して Boolean プロパティ値を設定できます。Boolean プロパティの値が false に計算される場合、DOM から削除されます。「Boolean のプロパティ」を参照してください。

変換された Aura コンポーネントの属性は、Lightning Web コンポーネントで完全にサポートされている必要があります。サポートされていないと、エラーや破損が発生する可能性があります。

Important

関連トピック

Public のプロパティ

The Japanese Summer '24 guide is now live

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