lwc:spread Template Directive

 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐋𝐖𝐂:𝐒𝐩𝐫𝐞𝐚𝐝?

𝐋𝐖𝐂:𝐒𝐩𝐫𝐞𝐚𝐝 is a powerful directive that brings simplicity and efficiency to your LWC development. It allows you to seamlessly pass all the properties of an object to a child component, eliminating the need to explicitly specify each property.

𝐇𝐨𝐰 𝐃𝐨𝐞𝐬 𝐈𝐭 𝐖𝐨𝐫𝐤?

By leveraging 𝐋𝐖𝐂:𝐒𝐩𝐫𝐞𝐚𝐝, you can effortlessly spread the properties of an object onto a child component in just a single line of code. This dynamic approach enhances reusability and flexibility, as any changes to the object's properties are automatically propagated to the child component. Talk about increased productivity!

Pass data to a child component using lwc:spread directive

Ex :

<!— Parent Component —>

<template>

<c-child lwc:spread={props}></c-child>

</template>

import { LightningElement } from 'lwc';

export default class ApiSpread extends LightningElement {

props = {

  firstName: 'Amy',

  lastName: 'Taylor'

};

}

<!— Child Component —>

<template>

<p>Hello, {fullName}!</p>

</template>

import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {

@api firstName;

@api lastName; 

get fullName() {

  return `${this.firstName} ${this.lastName}`;

  }

}