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