LWC Spread
LWC spread directive
Instead of passing multiple parameters to child component one by one, you can use lwc:spread directive.
lwc:spread directive is quite underrated, but very useful.
Instead of passing multiple parameters to child component one by one, you can use lwc:spread directive.
javascript
import { LightningElement } from "lwc";
export default class Parent extends LightningElement {
record = {
name: "Thomas Anderson",
recordId: "001"
};
}Decorate properties in child component with @api - as usual.
javascript
import { LightningElement, api } from "lwc";
export default class Child extends LightningElement {
@api name;
@api recordId;
}Pass properties from parent to child component:
Don't do this
<template>
<c-child name={properties.name} record-id={properties.recordId}></c-child>
</template>Do this
<template>
<c-child name={properties.name} record-id={properties.recordId}></c-child>
</template>You can also pass standard HTML attributes and functions with callbacks:
javascript
import { LightningElement, track } from "lwc";
export default class Parent extends LightningElement {
@track properties = {
name: "Thomas Anderson",
recordId: "001",
id: "elementId",
className: "elementClassName",
onclick: this.childClick.bind(this)
};
childClick() {
this.properties.name = "Neo";
}
}Remember! lwc:spread can be added to component only once, so choose wisely!
