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; // 直接从发送事件的组件中得到属性
}