Notes
In Lightning Web Components (LWC), you can pass data from a parent component to a child component using component properties. Here are the steps to send data from a parent to a child component in LWC:
1. In the parent component's JavaScript file, define a property that you want to pass to the child component. For example, if you want to pass a string to the child component, you can define a property like this:
@api message = 'Hello from parent!';
The @api
decorator makes the property public, which means it can be accessed by the child component.
2. In the parent component's HTML file, use the child component and bind the property to the component using the property name. For example, if you have a child component named myChild
, you can pass the message
property like this:
<template>
<c-my-child message={message}></c-my-child>
</template>
3. In the child component's JavaScript file, declare a property with the same name as the property in the parent component. For example:
@api message;
4. In the child component's HTML file, use the property to display the data. For example:
<template>
<p>{message}</p>
</template>