Aura コンポーネント　マークアップと CSS の移行サンプル

2024年9月5日

環境
Salesfoce

1.PropertySummary Aura コンポーネントのマークアップを定義する

<aura:attribute name="recordId" type="Id" />
<aura:attribute name="property" type="Property__c" />

説明
Aura コンポーネントのマークアップ (.cmp) の <aura:attribute> タグ
の属性を、Lightning Web コンポーネントの JavaScript
ファイル (.js) の JavaScript プロパティに移行します。

2.propertySummary.js でプロパティを使用する

import { LightningElement, api } from 'lwc';
export default class PropertySummary extends LightningElement {
    @api recordId;
    property;
      略
}

説明
Aura コンポーネントの recordId および property 属性は、
Lightning Web コンポーネントの recordId および
property JavaScript プロパティになります。

3.PropertyPaginator Aura コンポーネントでは、
基本的な式を使用して page、pages、total 属性の値を表示します。

<aura:component >
    <aura:attribute name="page" type="integer"/>
    <aura:attribute name="pages" type="integer"/>
    <aura:attribute name="total" type="integer"/>
    <div class="centered">{!v.total} properties • page {!v.page} of {!v.pages}</div>
</aura:component>