Scribd
Upload
8 views1 page

Custom Event

Uploaded by

rjohar369
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views1 page

Custom Event

Uploaded by

rjohar369
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Communication via Custom Events in LWC

Concept Code Snippet Explanation


Creating a new CustomEvent('eventName', { detail: This creates a new
Custom Event { key: 'value' } }); custom event, including
a detail object for
passing data.
Dispatching an this.dispatchEvent(new Use this.dispatchEvent()
Event CustomEvent('eventName', { detail: { to send the created
key: 'value' } })); event.
Child to Parent this.dispatchEvent(customEvent); This is how a child
Communication component dispatches an
event to the parent
component.
Child Component new CustomEvent('someaction', { detail: Example of a child
(JS) { message: 'Hello from Child!' } }); dispatching a message to
the parent.
Parent <c-child-component The parent component
Component onsomeaction={handleChildAction}></c- listens for the custom
(HTML) child-component> event with onsomeaction.
Handling the handleChildAction(event) { const This function handles
Event in Parent messageFromChild = the event and retrieves
(JS) event.detail.message; } data from the child.
Displaying Data <p>Message from Child: Display the message
in Parent {messageFromChild}</p> received from the child
(HTML) component.
Bubbling Events new CustomEvent('someaction', { detail: This allows the event to
{ message: 'Bubbling event' }, bubbles: bubble up through the
true }); DOM.
Composable new CustomEvent('someaction', { detail: Enables the event to
Events { message: 'Composable event' }, pass through the shadow
composed: true }); DOM, making it
accessible to outer
components.
Stopping Event event.stopPropagation(); Use this method to
Propagation prevent the event from
propagating further in
the DOM.
Event with new CustomEvent('someaction', { detail: This shows how to
Complex Data { type: 'update', data: { key: 'value' dispatch an event with a
} } }); more complex data
structure.

Sameer Vishwasrao

You might also like