一切为你洞悉，Salesforce LWC 文档：Fields、Properties 及 Attributes

2023-09-12 13:25:17

引言

Salesforce Lightning Web Components (LWC) 是一种用于构建 Lightning 应用程序的现代、声明式框架。LWC 组件是可重用的代码单元，可用来创建动态且响应式的用户界面。在组件的 JavaScript 类中声明 field，并在组件的模板中引用它们以动态更新内容。

本文将对 LWC 中的 Fields、Properties 和 Attributes 进行详细说明，帮助你掌握这些基本概念，构建出更强大的 LWC 组件。

Fields

Fields 是组件中保存数据的变量。它们与 JavaScript 类中的私有变量相似，但有一些关键区别。首先，fields 是声明式的，这意味着它们在组件的 JavaScript 类中声明，而不是在构造函数或其他方法中。其次，fields 是响应式的，这意味着当组件的状态发生变化时，它们的值也会自动更新。

要声明一个 field，可以使用 @track 修饰符。例如：

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  @track field = 'Initial Value';
}

在组件的模板中，可以使用 {!field} 语法来引用 field。例如：

<template>
  <h1>{!field}</h1>
</template>

当组件的状态发生变化时，field 的值将自动更新，并且组件中的任何引用都会自动反映这些更改。

Properties

Properties 是组件从外部接收的数据。它们与 JavaScript 类中的公共属性相似，但有一些关键区别。首先，properties 是声明式的，这意味着它们在组件的 JavaScript 类中声明，而不是在构造函数或其他方法中。其次，properties 是只读的，这意味着它们只能从外部设置，不能从组件内部修改。

要声明一个 property，可以使用 @api 修饰符。例如：

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
  @api property = 'Initial Value';
}

在组件的模板中，可以使用 {!property} 语法来引用 property。例如：

<template>
  <h1>{!property}</h1>
</template>

当外部代码设置组件的 property 时，property 的值将自动更新，并且组件中的任何引用都会自动反映这些更改。

Attributes

Attributes 是组件的元数据。它们用于为组件提供有关其行为的信息。属性可以在组件的 JavaScript 类或 HTML 模板中设置。

要声明一个属性，可以在组件的 JavaScript 类中使用 @attribute 修饰符。例如：

import { LightningElement, attribute } from 'lwc';

export default class MyComponent extends LightningElement {
  @attribute label = 'My Label';
}

在组件的 HTML 模板中，可以使用 data- 属性来设置属性。例如：

<template>
  <div data-label="My Label"></div>
</template>

组件可以使用 getAttribute() 方法来获取属性的值。例如：

export default class MyComponent extends LightningElement {
  connectedCallback() {
    const label = this.getAttribute('label');
    console.log(label); // "My Label"
  }
}