LWC: Apply Spread Properties To Child Components

  • LWC: Propagate a set of properties to a child component by utilizing the spread syntax.
  • The lwc:spread functionality allows elements to dynamically accept an object as properties during runtime.
  • This directive accepts a singular object.
  • This directive accepts a singular object.
  • Within your child component, incorporate these properties in your template.
  • Utilize the @api decorator to make your properties accessible to the parent component.
  • Note that lwc:spread consistently takes precedence, superseding any properties explicitly declared in the template. It’s important to highlight that only one instance of lwc:spread can be employed within a directive.

Example Below:

Parent LWC Component:

    <lightning-card title="LWC Spread Properties">
        <c-child lwc:spread={childPropsData}></c-child>
import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    childPropsData = { name: "CloudHAK", country: "INDIA" };

Child LWC Component:

    {name} &nbsp; {country}
import { LightningElement,api } from 'lwc';

export default class Child extends LightningElement {
    @api name;
    @api country;

Feel free to give our post a thumbs up and save this blog for future reference in your learning journey. We value your suggestions and welcome any feedback; please share your thoughts in the comment box. Happy coding, and remember, sharing is caring!