Migrate Events
Migrate component events in Aura components to standard DOM events in Lightning web components.
Here’s an overview for working with events in Lightning web components.
- Create an event
Instead of the proprietary
Event
object in Aura components, use theEvent
orCustomEvent
standard DOM objects. There's no equivalent in Lightning web components for the<aura:registerEvent>
tag in Aura component markup to register that a component can fire an event.- Fire an event
Instead of
event.fire()
in an Aura component, usethis.dispatchEvent(myEvent)
, which is a standard DOM method, in Lightning web components.- Handle an event
An Aura component uses the
<aura:handler>
tag in markup to define a handler. Alternatively a component can declare a handler action when it references another component in its markup. This Aura component usesc:child
in its markup and declares ahandleChildEvent
handler for thesampleComponentEvent
thatc:child
fires.A Lightning web component can similarly declare a declarative handler. The event name in the declarative handler is prefixed by
<!-- prettier-ignore -->on
.The event handler function,
handleChildEvent
, is defined in the JavaScript file of the component.In a Lightning web component, you can also programmatically set up a handler using the standard
addEventListener()
method in the component's JavaScript file.- Retrieve an event payload
Use the
event.detail
property to retrieve the event payload unless otherwise stated.
Use the Lightning message service (lightning/messageService
) to communicate with components within a single page or across multiple pages. You can also use the pub-sub pattern to communicate between components within a single page.
This table maps standard Aura events, such as for navigating to a component or to display the record create panel, to usage in Lightning web components. Events that are not listed don’t currently have an equivalent in Lightning Web Components.
Aura Component | Lightning Web Component | Description |
---|---|---|
aura:locationChange | The hashchange browser event fires when a window's hash changes. To handle this event, use the onhashchange event handler. | Fired when the hash part of the URL in the browser's location bar has been modified. |
aura:valueChange | Use properties with custom getter and setter methods. | Fired when a property value has changed. |
aura:valueDestroy | Use the disconnectedCallback() lifecycle hook. See Component Lifecycle. | Fired when a component is destroyed. |
aura:valueInit | To replace the init event handler, use the connectedCallback() lifecycle hook. See Migrate Initializers. | Fired when a component has been initialized. |
aura:valueRender | Use the renderedCallback() or render() lifecycle hook. See Component Lifecycle. | Fired when a component has been rendered. |
force:createRecord | Use the navigation service. | Displays the record create panel. |
force:editRecord | Use the navigation service. | Displays the record edit panel. |
force:navigateHome (deprecated) | Use the navigation service. | Navigates to a record home page. |
force:navigateToComponent (deprecated) | Use the navigation service. | Navigates to a component. |
force:navigateToList | Use the navigation service. | Navigates to a list view. |
force:navigateToObjectHome | Use the navigation service. | Navigates to an object home page. |
force:navigateToRelatedList | Use the navigation service. | Navigates to a related list. |
force:navigateToSObject | Use the navigation service. | Navigates to a record. |
force:navigateToURL | Use the navigation service. | Navigates to a URL. |
force:refreshView | To refresh Apex data provisioned via the wire service, call refreshApex() . If your code calls an Apex method imperatively, refresh the data by calling the method again and then call notifyRecordUpdateAvailable(recordIds) to update the Lightning Data Service (LDS) cache. You only need to call notifyRecordUpdateAvailable() if you expect any relevant data to be updated in the LDS cache.notifyRecordUpdateAvailable() signals to LDS that some records are stale and refreshes those records that are in the LDS cache. | Reloads the view without a page reload. |
force:showToast | Import the lightning/platformShowToastEvent module. See Toast Notifications | Displays a toast message to alert users of a success, error, or warning. |
lightning:openFiles | Use the navigation service. See Open Files. | Opens one or more file records. |
lightning:tabClosed | Planned for a future release. | Fires when a Console workspace or subtab has been successfully closed. |
lightning:tabCreated | Planned for a future release. | Fires when a Console workspace or subtab has been successfully created. |
lightning:tabFocused | Planned for a future release. | Fires when a Console workspace or subtab is focused. |
lightning:tabRefreshed | Planned for a future release. | Fires when a Console workspace or subtab has been successfully refreshed. |
lightning:tabReplaced | Planned for a future release. | Fires when a Console primary tab or subtab has been successfully replaced. |
lightning:tabUpdated | Planned for a future release. | Fires when a Console workspace or subtab has been updated, which includes label, icon, or other content changes. |
ltng:afterScriptsLoaded | Import the static resource and import methods from the lightning/platformResourceLoader module. See Use Third-Party JavaScript Libraries. | Fired when ltng:require has loaded all scripts listed in ltng:require.scripts |
Our forward-looking statement applies to feature support that’s planned for a future release. Because roadmap items can change at any time, make your purchasing decisions based on currently available technology.
See Also