适用于Aura开发人员的Lightning Web Components 与Event通信

创建和发送事件

代替专有 事件 Aura组件中的对象，请使用 事件 要么 CustomEvent标准DOM接口。我们强烈建议您使用CustomEvent界面，因为这样可以提供更一致的体验。该框架可能需要修补事件的属性和方法，以规范浏览器之间的实现，并使用CustomEvent保证您的组件被覆盖。Internet Explorer不支持CustomEvent 接口本身，但Lightning Web组件模型增加了对此的支持。

Lightning Web组件中没有等效的 <aura：registerEvent>在Aura组件标记中标记，以注册组件可以触发事件。由于使用了标准的DOM事件，因此不需要额外的仪式。

代替 event.fire（） 在Aura组件中，使用标准DOM方法， this.dispatchEvent（myEvent），在Lightning Web组件中。

这是在广告素材中创建和分配（触发）事件的示例 propertyTile 闪电网络组件。

export default class PropertyTile extends LightningElement {
    @api property;
    propertySelected() {
        const selectedEvent = new CustomEvent('selected', {
            detail: this.property.Id,
        });
        this.dispatchEvent(selectedEvent);
    }
}

中的第一个参数 CustomEvent（） 构造函数将事件的名称设置为 已选。

第二个参数是配置事件行为的对象。在此对象中，我们将详情，这是事件的数据有效负载。处理组件可以读取数据。在这种情况下，我们通过了this.property.Id 值。

处理事件

Aura组件使用 <光环：处理程序>在标记中标记以定义处理程序。另外，一个组件可以在其标记中引用另一个组件时声明一个处理程序动作。

此光环组件使用 c：孩子 在其标记中并声明一个 handleNotification 通知事件的处理程序 c：孩子 火灾。

<c:child notification="{!c.handleNotification}"/>

Lightning Web组件可以类似地具有声明性处理程序。声明处理程序中的事件名称以前缀上。

<c-child onnotification={handleNotification}></c-child>

的 handleNotification 事件处理函数在组件的JavaScript文件中定义。

在Lightning Web组件中，您还可以使用标准程序以编程方式设置处理程序 addEventListener（） 组件的JavaScript文件中的方法。

让我们看看DreamHouse应用程序如何处理在 propertyTile闪电网络组件。的propertyTileList Lightning Web组件在其HTML文件中处理此事件。

<template for:each={properties} for:item="property">
    <c-property-tile property={property} key={property.Id} onselected={onPropertySelected}></c-property-tile>
</template>

的 已选 事件名称以开头 上 在由配置的声明处理程序中 onselected = {onPropertySelected}。

的 onPropertySelected事件处理程序函数在propertyTileList.js中定义。

onPropertySelected(event) {
    pubsub.fire('propertySelected', event.detail);
}

让您回想起我们开除 已选 事件发生 propertyTile。的CustomEvent（） 构造函数集 详情 至 this.property.Id。处理程序通过访问以下事件来解压缩事件数据事件细节。在此示例中，我们获得事件细节。

我们解释发生了什么事 pubsub.fire（） 接下来我们来看应用程序事件。