How can you pass data from a child component to a parent component

Expert Posts
, ,
1

To pass data from a child component to a parent component in JavaScript, you can follow these steps:

  1. Define a function in the parent component that will receive the data from the child component.
  2. In the child component, create an event handler that will trigger when the data needs to be passed to the parent.
  3. Inside the event handler, call the function defined in the parent component and pass the data as an argument.
  4. In the parent component, use the passed data as required.

Here’s an example of how you can achieve this using JavaScript and HTML:

<!-- Parent Component -->
<div id="parentComponent">
<h2>Parent Component</h2>
<p>Received data: <span id="receivedData"></span></p>
<child-component></child-component>
</div>
<!-- Child Component -->
<template id="childComponent">
<h3>Child Component</h3>
<button onclick="passDataToParent()">Pass Data to Parent</button>
</template>
<script>
// Define the function in the parent component to receive the data
function receiveDataFromChild(data) {
document.getElementById("receivedData").textContent = data;
}
// Create the child component
class ChildComponent extends HTMLElement {
connectedCallback() {
const template = document.getElementById("childComponent");
const content = template.content.cloneNode(true);
this.appendChild(content);
}
}
customElements.define("child-component", ChildComponent);
// Event handler in the child component to pass data to the parent
function passDataToParent() {
const data = "Hello from Child";
const parentComponent = document.getElementById("parentComponent");
parentComponent.receiveDataFromChild(data);
}
</script>

In this example, when you click the “Pass Data to Parent” button in the child component, it triggers the passDataToParent() function. This function retrieves the parent component using its ID and calls the receiveDataFromChild() function defined in the parent component, passing the data as an argument. The parent component then updates the received data in the HTML.