Data Binding Behavior Differences With Aura

When you add a component in markup, you can initialize public property values in the component based on property values of the owner component. In Lightning Web Components, the data binding for property values is one-way. The data-binding behavior is different for the Lightning Web Components and Aura development models.

Aura has two forms of expression syntax for data binding.

Here’s a summary of the differences between the forms of expression syntax.

{#expression} (Unbound Expressions)

Data updates behave as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled.

Objects, such as Array or Map, are passed by reference, so changes to the data in the child propagate to the parent. However, change handlers in the parent aren’t notified. The same behavior applies for changes in the parent propagating to the child.

{!expression} (Bound Expressions)

Data updates in either component are reflected through bidirectional data binding in both components. Similarly, change handlers are triggered in both the parent and child components.

The data binding between components for property values is one-way.

To communicate down from a parent component to a child component, set a property or call a method on the child component.

To communicate up from a child component to a parent component, send an event.

For more information, see Set Properties on Child Components.