---
title: "LWC Spread"
url: "https://blog.beyondthecloud.dev/tips/lwc-spread"
category: "LWC"
published: "2025-01-06"
---

# LWC Spread

Instead of passing multiple parameters to child component one by one, you can use lwc:spread directive.

### 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:

```markup
<template>
    <c-child name={properties.name} record-id={properties.recordId}></c-child>
</template>
```

```markup
<template>
    <c-child lwc:spread={properties}></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!