• 【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'
            },
        ];
    }
    
     
  • 相关阅读:
    Debian apt-get 无法补全
    Python 字典排序
    Python 替换字符串
    Debian 7 64位安装 wine
    Python Virtualenv 虚拟环境
    ASP.NET MVC ModelState
    Oracle存储过程写法
    利用ODBC从SQLServer向Oracle中导数据
    web自定义控件UserControl
    工作笔记
  • 原文地址:https://www.cnblogs.com/zhuzhubaoya/p/14053881.html
走看看 - 开发者的网上家园