A small example of custom event & dispatch event where we define a custom event in child component and passing values from child component to parent component in — LWC
Hey guys, today in this post we are going to learn about How to define a custom event in child lightning web component and passing values from child component to parent component in — LWC
Files we used in this post example:-
lwcParent.html
Lightning Web Component HTML
It is Templae HTML file for used to write HTML element for user interface.
lwcParent.js
Lightning Web Component JavaScript
It is holding child component and it’s value.
lwcParent.js-meta.xml
XML Meta File
It is used for where this lightning web component you want to exposed.
lwcChild.html
Lightning Web Component HTML
It is child HTML file and calling on lwcParent.html.
lwcChild.js
Lightning Web Component JavaScript
It is holding @api public property with handler change functionality and it’s calling into parent componet.
lwcChild.js-meta.xml
XML Meta File
It is used for where this lightning web component should be exposed.
eventApplwc.app
Lightning Application
It is used for call the parent component to preview on browser.
Live Demo
Other related post that would you like to learn in LWC
Start lwcParent Component
Step 1:- Create Lightning Web Component : lwcParent.html
SFDX:Lightning Web Component >> New >> lwcParent.html
lwcParent.html [Lightning Web Component HTML]
Step 2:- Create Lightning Web Component : lwcParent.js
SFDX:Lightning Web Component >> New >> lwcParent.js
lwcParent.js [LWC JavaScript File]
Step 3:- Create Lightning Web Component : lwcParent.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcParent.js-meta.xml
lwcParent.js-meta.xml [LWC Meta Data XML]
Start lwcChild Component
Step 4:- Create Lightning Web Component : lwcChild.html
SFDX:Lightning Web Component >> New >> lwcChild.html
lwcChild.html [Lightning Web Component HTML]
Step 5:- Create Lightning Web Component : lwcChild.js
SFDX:Lightning Web Component >> New >> lwcChild.js
lwcChild.js [LWC JavaScript File]
Step 6:- Create Lightning Web Component : lwcChild.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcChild.js-meta.xml
lwcChild.js-meta.xml [LWC Meta Data XML]
Start Application Component
Step 7:- Create Lightning Application : eventApplwc.app
From Developer Console >> File >> New >> Lightning Application
eventApplwc.app [Component Application File]
Further post that would you like to learn
Originally published at https://www.w3web.net on December 6, 2020.
