@api
公開プロパティはリアクティブです。公開プロパティの値が変更されると、コンポーネントは再表示されます。公開プロパティを公開するには、項目を@api
でデコレートします。公開プロパティではコンポーネントの API を定義します。(Public)公開メソッドを公開するには、公開メソッドを
@api
でデコレートします。公開メソッドはコンポーネントの API の一部です。コンテインメント階層の下位と通信するには、所有者と親コンポーネントは子コンポーネントで JavaScript メソッドをコールできます。
@track
項目はリアクティブです。項目の値が変更され、その項目がテンプレートで使用されているか、テンプレートで使用されているプロパティの getter で使用されている場合、コンポーネントは再表示され、新しい値を表示します。(Private)
@track
の使用事例が 1 つあります。項目にオブジェクトまたは配列が含まれる場合、追跡される変更の深度には制限があります。オブジェクトのプロパティまたは配列の要素の変更を監視するようにフレームワークに指示するには、項目を@track
でデコレートします。
@wire
Lightning Web コンポーネントでは、リアクティブなワイヤサービスを使用して Salesforce データを読み取ります。ワイヤサービスがデータをプロビジョニングすると、コンポーネントによって表示されます。コンポーネントは、その JavaScript クラスの@wire
を使用して、ワイヤアダプタまたは Apex メソッドを指定します。
写真はウェブから
①@api
app.html
<template>
Hello, {name}
</template>
app.js
import { LightningElement, api } from 'lwc';
export default class Example extends LightningElement {
@api name = 'world!';
}
@api name = ‘world!’;⇒@api name = ‘zchao博客之家!’;
nameが変わる場合、app.htmlの{name}も更新されること。
二つのコンポーネント
<!– bike.html –>
<template>
<imgsrc={bikepro.picture} alt="bike picture"/>
<p>{bikepro.name}</p>
</template>
// bike.js
import { LightningElement, api } from 'lwc';
export default class Bike extends LightningElement {
@api bikepro;
}
<!– app.html –>
<template>
<div>
<c-bike bikepro={bikeinfo}></c-bike>
</div>
</template>
// app.js
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
bikeinfo = {
name: 'Electra X4',
picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'
};
}
<c-bike bikepro={bikeinfo}></c-bike>
コンポーネントAppはコンポーネントbikeを利用可能、@api bikepro;のため、もし@tracki bikepro;の場合、できません。
②@track
app.html
<template>
<lightning-card title="HelloExpressions" icon-name="custom:custom1">
<div class="slds-m-around_medium">
<lightning-input
name="firstName"
label="First Name"
onchange={handleChange}
></lightning-input>
<lightning-input
name="lastName"
label="Last Name"
onchange={handleChange}
></lightning-input>
<p class="slds-m-top_medium">
Uppercased Full Name: {uppercasedFullName}
</p>
</div>
</lightning-card>
</template>
app.js
import { LightningElement,track } from 'lwc';
export default class App extends LightningElement {
@track firstName = '';
@track lastName = '';
handleChange(event) {
const field = event.target.name;
if (field === 'firstName') {
this.firstName = event.target.value;
} else if (field === 'lastName') {
this.lastName = event.target.value;
}
}
get uppercasedFullName() {
return`${this.firstName}${this.lastName}`.trim().toUpperCase();
}
}
<lightning-input>
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example#lightningcomponentdemo:exampleInputDate
定義:
@track firstName = ”;
@track lastName = ”;
handleChange(event):自動メソッドを呼び出
get uppercasedFullName():getメソッドを呼び出
getが無かったら、どうなっているのか?
③@wire
VSCodeでリリースしよう!
wireFunction.html
<template>
<lightning-card title="My Contact Record" icon-name="standard:contact">
<template if:true={contact.data}>
<div class="slds-m-around_medium">
<p>{name}</p>
<p>{title}</p>
<p><lightning-formatted-phone value={phone}></lightning-formatted-phone></p>
<p><lightning-formatted-email value={email}></lightning-formatted-email></p>
</div>
</template>
<template if:true={contact.error}>
<c-error-panel errors={contact.error}></c-error-panel>
</template>
</lightning-card>
</template>
wireFunction.js
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
'Contact.Name',
'Contact.Title',
'Contact.Phone',
'Contact.Email',
];
export default class WireFunction extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: '0032v00002xiU72AAE', fields: FIELDS })
contact;
get name() {
return this.contact.data.fields.Name.value;
}
get title() {
return this.contact.data.fields.Title.value;
}
get phone() {
return this.contact.data.fields.Phone.value;
}
get email() {
return this.contact.data.fields.Email.value;
}
}
wireFunction.js-meta.xml
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>WireFruction</masterLabel>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Product2</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
errorPanel.html
<template>
<div> {errors} </div>
</template>
errorPanel.js
import { LightningElement,api } from 'lwc';
export default class ErrorPanel extends LightningElement {
@api errors;
}
自分の環境にリリースします。
SFDX: Authorize an Org
SFDX: Deploy Source to Org
Edit Pageに配置しておきます。
contact;recordId: ‘0032v00002xiU72AAE’,
このrecordIdは実際環境のContactのIdです。
Apex メソッドのコール
ContactController
public with sharing class ContactController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContactList() {
return [
SELECT Id, Name, Title, Phone, Email
FROM Contact
LIMIT 10
];
}
}
メソッドの結果のキャッシュ
実行時のパフォーマンスを改善するには、@AuraEnabled(cacheable=true) を設定してクライアントにメソッドの結果をキャッシュします。cacheable=true を設定するには、メソッドがデータの取得のみを行う必要があります。メソッドでデータを変更することはできません。
apexWireMethodToProperty.html
<!-- apexWireMethodToProperty.html -->
<template>
<lightning-card title="ApexWireMethodToProperty" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="contact">
<p key={contact.Id}>{contact.Name}</p>
</template>
</template>
<template if:true={contacts.error}>
<c-error-panel errors={contacts.error}></c-error-panel>
</template>
</div>
</lightning-card>
</template>
apexWireMethodToProperty.js
// apexWireMethodToProperty.js
import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
export default class ApexWireMethodToProperty extends LightningElement {
@wire(getContactList) contacts;
}
たくさんの例はこちら⇒
https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc
以上となります。
デコレータの簡単な説明です、それから、具体的なサンプルを紹介したいと思います。
何か問題がございましたら、コメントを頂れば嬉しいです。
Latest posts by zchao (see all)
- Auraでアクションボタン作成して画面のチェックボックス項目一括処理 - 2021年4月12日
- デフォルト項目値を含むレコード作成実例説明(defaultFieldValues) - 2021年1月9日
- Salesforce のノーコード・ローコード開発 - 2020年12月31日