{"id":11833,"date":"2025-11-26T09:29:14","date_gmt":"2025-11-26T09:29:14","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=11833"},"modified":"2025-11-25T09:30:11","modified_gmt":"2025-11-25T09:30:11","slug":"child-to-parent-communication-in-lwc-a-complete-guide-part-1","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2025\/11\/26\/child-to-parent-communication-in-lwc-a-complete-guide-part-1\/","title":{"rendered":"Child-to-Parent Communication in LWC \u2013 A Complete Guide (Part 1)"},"content":{"rendered":"\n<p>In Lightning Web Components (LWC), components often need to communicate with each other. While parent-to-child communication is straightforward, child-to-parent communication works through Custom Events. This approach is essential when a child component needs to send data or trigger logic in the parent.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">What is Child-to-Parent Communication?<\/mark><\/strong><\/h2>\n\n\n\n<p>It allows a child LWC to:<\/p>\n\n\n\n<p>\u25cf Send data to the parent<br>\u25cf Notify the parent about user actions<br>\u25cf Trigger logic inside the parent component<\/p>\n\n\n\n<p>This communication relies on <strong>Custom Events<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">How Custom Events Work?<\/mark><\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Child fires the event<\/strong><\/li>\n<\/ul>\n\n\n\n<p>this.dispatchEvent(<br>new CustomEvent(&#8216;valuechange&#8217;, {<br>detail: { value: selectedValue }<br>})<br>);<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Parent listens to the event<\/strong><\/li>\n<\/ul>\n\n\n\n<p>&lt;c-child-component onvaluechange={handleValueChange}&gt;&lt;\/c-child-component&gt;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Parent handles it<\/strong><\/li>\n<\/ul>\n\n\n\n<p>handleValueChange(event) {<br>this.selectedValue = event.detail.value;<br>}<\/p>\n\n\n\n<p><strong>Example Scenario<\/strong><\/p>\n\n\n\n<p>A child component sends the selected value from a dropdown to the parent component.<br>The parent receives this value and displays it in the UI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Step-by-Step Implementation<\/mark><\/strong><\/h2>\n\n\n\n<p><strong>Child Component<\/strong><\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/1.-Childhtml-file.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/1.-Childhtml-file.png\" alt=\"Child.html\"><\/a><\/center><font size=\"2\"><center><i>Child.html<\/i><\/center><\/font>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/2.-Childjs-file.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/2.-Childjs-file.png\" alt=\"Child.js\"><\/a><\/center><font size=\"2\"><center><i>Child.js<\/i><\/center><\/font>\n\n\n\n<p><strong>Parent Component<\/strong><\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/3.-Parenthtml-file.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/3.-Parenthtml-file.png\" alt=\"Parent.html\"><\/a><\/center><font size=\"2\"><center><i>Parent.html<\/i><\/center><\/font>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/4.-Parentjs-file.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2025\/11\/4.-Parentjs-file.png\" alt=\"Parent.js\"><\/a><\/center><font size=\"2\"><center><i>Parent.js<\/i><\/center><\/font>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Understanding the Event Flow<\/mark><\/strong><\/h2>\n\n\n\n<p>\u25cf Child fires a custom event \u2192 <strong>valuechange<\/strong><br>\u25cf Parent listens using:<br>onvaluechange={handleValueChange}<br>\u25cf Parent receives the data through <strong>event.detail<\/strong><br>\u25cf UI updates automatically using the reactive property selectedValue<\/p>\n\n\n\n<p>Custom events provide a clean and powerful way for child components to communicate back to parent components. This ensures reusable components and a well-structured architecture.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Conclusion<\/mark><\/strong><\/h2>\n\n\n\n<p>Child-to-parent communication in LWC becomes simple with custom events. By following these steps, you can easily send data from a child component to a parent and build clean, modular Lightning components.<\/p>\n\n\n\n<p>In Part 2, we will cover <strong>Parent-to-Child communication<\/strong>.<\/p>\n\n\n\n<p>By following the above blog instructions, you will be able to learn <strong>Child-to-Parent Communication in LWC \u2013 A Complete Guide (Part 1)<\/strong>. If you still have queries or any related problems, don\u2019t hesitate to contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>. More details about our integration product are available on <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-intacct-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">our website<\/a> and <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noreferrer noopener\">Salesforce AppExchange<\/a>.<\/p>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. However, if you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/22\/displaying-types-of-toast-message-in-lightning-web-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">Displaying Types of Toast Message in Lightning Web component.<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Fetch current Record Id from Lightning Web Components (LWC).<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/14\/how-to-create-multi-select-pick-list-field-using-lightning-web-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Multi-Select Pick-list Field Using Lightning Web Component<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/16\/how-to-invoke-an-lwc-component-function-from-aura-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to invoke an LWC Component function from Aura Component.<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In Lightning Web Components (LWC), components often need to communicate with each other. While parent-to-child communication is straightforward, child-to-parent communication works through Custom Events. This approach is essential when a child component needs to send data or trigger logic in the parent. What is Child-to-Parent Communication? It allows a child LWC to: \u25cf Send data\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2025\/11\/26\/child-to-parent-communication-in-lwc-a-complete-guide-part-1\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[14,15,16,20,1895,1892,1894,1897,1893,1898,206,207,1264,208,1050,1896,1049,1079,643,651,1032],"class_list":["post-11833","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-apex-classes","tag-apex-development","tag-apex-in-salesforce","tag-apex-references-in-salesforce","tag-combo-box-in-html","tag-combo-box-label","tag-component-in-salesforce-lwc","tag-css-styling","tag-customize-lightning-combo-box-label","tag-dynamic-label","tag-lightning","tag-lightning-basics","tag-lightning-combo-box","tag-lightning-component","tag-lightning-web-component","tag-lightning-combobox","tag-lwc","tag-record-page","tag-retrieve-records-in-lightning","tag-salesforce-lightning-component","tag-salesforce-lightning-component-bundle"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/11833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=11833"}],"version-history":[{"count":12,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/11833\/revisions"}],"predecessor-version":[{"id":11850,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/11833\/revisions\/11850"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=11833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=11833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=11833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}