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'
        },
    ];
}