Events & Communication in Lightning Web Components(LWC) : jayakrishnasfdc
by: jayakrishnasfdc
blow post content copied from Jayakrishna Ganjikunta
click here to view original post
Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events.
“Use events to communicate up the component containment hierarchy” .
For example, a child component, example-todo-item, dispatches an event to tell its parent, example-todo-app, that a user selected it. Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser.
Lightning web components implement the EventTarget interface, which allows them to dispatch events, listen for events, and handle events.
In Aura component, we need to create a separate event file and need to register the event, where event is fired. Moreover, to handle the event, a handler is needed in component hierarchy. In LWC, registering of event is not required.
To create events, we strongly recommend using the CustomEvent interface instead of the Event interface. In Lightning web components, CustomEvent provides a more consistent experience across browsers, including Internet Explorer.
In Aura component, we need to create a separate event file and need to register the event, where event is fired. Moreover, to handle the event, a handler is needed in component hierarchy. In LWC, registering of event is not required. We can fire event programmatically, and defining handler to catch the event is optional, i.e. it can also be done programmatically.
LWC uses standard DOM events to create and dispatch events. The DOM events system is a programming design pattern that includes these elements.
- An event name, called a type
- A configuration to initialize the event
- A JavaScript object that emits the event
For example – if you change the dispatch statement to this.dispatchEvent(new CustomEvent(“uploadEvent”)); code won’t work because the event name contain upper case letter.
1. Create an Event
We can use the customEvent() constructor to create an event. In constructor we need to pass custom event name and detail of the event. The only difference between event and customEvent() is that the CustomEvent class will allow us to store information in its detail property and thus transmit that information to the listeners of the event.
The customEvent constructor has one required parameter, which is a string indicating the event name. As a component author, we can name the event when we create the event. We can use any string as our event name.
However, recommendation is to follow DOM event standard.
- No uppercase letters
- No spaces
- Use underscores to separate words
Don’t prefix event name with the string on.
new customEvent(eventName, props);
2. Dispatch an Event
Then, we can make an event target dispatch the created event invoking the dispatchEvent standard method.
this.dispatchEvent(new customEvent(eventName, props);
3. Handle an Event
There are two ways to listen to an event.
- Declaratively from the component’s HTML template
- Programmatically using an imperative JavaScript API
It’s better to listen from the HTML template since it reduces the amount of code we need to write. To handle events, define methods in the component’s JavaScript class
Please refer below Articles for…
- Parent to Child communication of Events in LWC
- Child to Parent communication of Events in LWC
- Publish Subscriber model in Lightning Web Component.
December 05, 2020 at 03:33PM
Click here for more details...
=============================
The original post is available in Jayakrishna Ganjikunta by jayakrishnasfdc
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================
Post a Comment