Lightning Web Component 事件代码示例

组件的事件

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

在 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; // 直接从发送事件的组件中得到属性
}
posted @ 2020-06-21 21:24  程程哥  阅读(677)  评论(0编辑  收藏  举报