Lightning Web Component 事件代码示例

Posted 2020-12-11 程程哥的 Salesforce 笔记

组件的事件

组件通过各种事件来进行通讯。

在 LWC 中，可以通过实现 CustomEvent 接口进行自定义事件，通过 EventTarget.dispatchEvent() 来分配事件。

注意：

• 定义事件时，不需要在事件名前加 on，因为在使用的时候会默认在名称前使用 on，比如：当我们定义了 click 事件，在 html 代码中用 onclick 来调用它

代码示例

假设有两个组件，名字为 lwcA 和 lwcB。

在 lwcA 的 HTML 模板中定义一个按钮，点击触发事件。

<template>
    <lightning-button label="点击" onclick={handleClick}></lightning-button>
</template>

@api msg = ‘message through event‘; // 使用 api 标注可以让这个属性变为 public 模式，从而被其他组件引用

handleClick(event) {
    this.dispatchEvent(new CustomEvent(‘exampleevent‘, {
        detail: ‘hello world‘
    }));
}

在 lwcB 中引用 lwcA 组件，并定义事件如何监听和处理。

<template>
    <c-lwc-a onexampleevent={handleLwcEvent}></c-lwc-a>
</template>

handleLwcEvent(event) {
    const helloWorldText = event.detail; // 从 event 的 detail 属性中得到值
    const msgFromLwcA = event.target.msg; // 直接从发送事件的组件中得到属性
}