【Salesforce】Lightning Web Component 组件简介
相比较 Aura 组件，Lightning Web Component 的组件是遵循了现在流行前端框架的组件思想，文件的结构和开发方式也能让有前端经验的开发者更加容易掌握。
本文只介绍最基本的概念，详细的介绍和开发教程可以参考官方文档。
LWC 组件的文件结构
每个 LWC 组件都在一个文件夹中，包括了以下几个文件：
文件夹名：exampleComponent
- exampleComponent.html 前端 HTML 代码，决定了前端的 UI
- exampleComponent.js 相关的 JavaScript 代码，包含了前端的逻辑
- exampleComponent.css 相关的 CSS 代码
- exampleComponent.svg 包含组件相关的图标文件
- exampleComponent.js-meta.xml 组件对于 Salesforce 的设置内容，比如组件在哪些类型的页面上可用
下面给出一些文件的详细介绍。
exampleComponent.html 文件
必须用 template 标签把所有内容包括进去。
<template>
</template>
组件之间也能相互引用，比如要引用一个名为 testComp 的组件，则需要使用连字符来连接每个单词：
<template>
<c-test-comp></c-test-comp>
</template>
这里的 c 是默认命名空间的名字，可以是其他值。
exampleComponent.js 文件
默认的内容如下：
import { LightningElement } from 'lwc';
export default class ExampleComponent extends LightningElement {
}
第一行代码表示了要引入 LWC 的默认库。
其余部分的代码将此组件作为一个类导出，供以后使用。它必须继承 LightningElement 类。
exampleComponent.js-meta.xml 文件
默认的内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
isExposed 标签决定了 LWC 组件在 Salesforce 中是否可见，默认是 false。
我们可以用 targets 标签来决定组件可以在哪些类型的页面中可见。比如：
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
上面的代码将组件设置为 Lightning 页面和社区页面都可见。
在组件中的数据和事件绑定
在 HTML 文件中，花括号可以用来绑定数据。比如：
<template>
Hello, {msg}!
<lightning-input label="Message is:" value={msg} onchange={handleChange}></lightning-input>
</template>
import { LightningElement, track } from 'lwc';
export default class Hello extends LightningElement {
@track msg = 'World';
handleChange(event) {
this.msg = event.target.value;
}
}
上面的代码将 JS 文件中定义的变量 msg 绑定到了前端的 HTML 文件中。
在 JS 文件中，引用并使用了注解 track。它的功能是让 msg 变量和前端动态绑定。否则，当 JS 文件中的 msg 变量变化，HTML 中不会相应变化。
我们使用了一个文本输入控件 lightning-input 来让 msg 的值可以通过用户输入动态变化。
在 lightning-input 控件中，我们使用 onchange 来定义内容变化的事件。在 JS 文件中有相对应的函数 handleChange 来设置相关逻辑。
get 方法
在 JS 文件中，get 关键字也可以定义一个变量。比如：
<template>
{helloMessage}
</template>
import { LightningElement, track } from 'lwc';
export default class Hello extends LightningElement {
@track msg = 'World';
get helloMessage() {
return 'Hello, ${this.msg}';
}
}
在上面的组件中，使用 get 关键字定义了 helloMessage 变量。
关于变量注解
变量有两个常用的注解：
- track：类似 private 属性，相关的变量只能本组件访问
- api：类似 public 属性，相关的变量可以和其他组件进行传递通讯
在组件中的条件显示
在 HTML 文件中可以使用包含了 if:true|false 的 template 标签根据 if 条件动态显示内容。
<template>
<!-- 其他内容 -->
<template if:true={shouldShow}>
<p>
<!-- 条件为真则显示的内容 -->
</p>
</template>
<!-- 其他内容 -->
</template>
import { LightningElement, track } from 'lwc';
export default class Hello extends LightningElement {
@track shouldShow = true;
}
在组件中的循环显示
在 HTML 文件中可以使用包含了 for:each 的 template 标签循环显示列表内容。
每个循环项必须有一个 key 的属性。
<template>
<!-- 其他内容 -->
<ul>
<template for:each={items} for:item="item">
<li key={item.id}>
列表项：{item.text}
</li>
</template>
</ul>
<!-- 其他内容 -->
</template>
import { LightningElement, track } from 'lwc';
export default class Hello extends LightningElement {
@track items = [
{
id: 1,
text: '列表项1'
},
{
id: 2,
text: '列表项2'
},
{
id: 3,
text: '列表项3'
},
];
}
