Component Parameter Binding in Blazor 7.0

In prior Blazor releases, binding across multiple components required binding to properties with get/set accessors.

In .NET 6 and earlier:

<NestedGrandchild @bind-GrandchildMessage="BoundValue" />

@code {
    ...

    private string BoundValue
    {
        get => ChildMessage ?? string.Empty;
        set => ChildMessageChanged.InvokeAsync(value);
    }
}

In .NET 7, you can use the new @bind:get and @bind:set modifiers to support two-way data binding and simplify the binding syntax:

<NestedGrandchild @bind-GrandchildMessage:get="ChildMessage" 
    @bind-GrandchildMessage:set="ChildMessageChanged" />

References
https://learn.microsoft.com/en-us/aspnet/core/migration/60-70?view=aspnetcore-7.0&tabs=visual-studio#simplify-component-parameter-binding
https://pupli.net/2022/01/two-way-binding-in-blazor-component/

Related