Lightning Web Component 事件代码示例

2021-02-01 23:16

阅读:501

标签:自定义事件   处理   amp   需要   事件   detail   htm   定义   点击   

组件的事件

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

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

注意:

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

代码示例

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

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

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

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

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

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

Lightning Web Component 事件代码示例

标签:自定义事件   处理   amp   需要   事件   detail   htm   定义   点击   

原文地址:https://www.cnblogs.com/chengcheng0148/p/lwc_event_intro.html


评论


亲,登录后才可以留言!