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

posted @ 2020-04-15 21:10 程程哥阅读(1297) 评论(2) 编辑收藏举报

刷新页面返回顶部