Clarify difference between @bind:get/@bind:set and Value/ValueChanged in component parameters binding

[UniMichael]

Description

The "Bind across more than two components" states the following:

@bind:get/@bind:set syntax allows you to:

• Avoid creating an extra property that only exists to forward values and callbacks across chained components, which was required prior to the release of .NET 7.
• Intercept and transform values before they're applied.
• Keep the parameter immutable in the child, while still supporting two-way binding.

Its example is about how @bind:get/@bind:set avoids the need for a custom property that would handle passing the value and calling the change handler and dropping its Task (like you needed in .NET 6) if we wanted to use @bind-ChildMessage, but doesn't actually elaborate on the differences between something like this:

<MyComponent @bind-Value="Value" />

<MyComponent @bind-Value:get="@Value"
             @bind-Value:set="@(value => Value = value)"/>

<MyComponent Value="@Value"
             ValueChanged="@(value => Value = value)"
             ValueExpression="@(() => Value)"/>

@code {

    private string Value
    {
        get => field;
        set => field = value.Length > 3 ? value[..3] : value;
    } = string.Empty;

}

There is a functional difference between @onchange and @bind:set for native HTML elements like <input /> (it lets Blazor know you're planning on updating the bound value, and that it'll need to re-render), but is there a practical difference when it comes to component parameters? From my testing, there doesn't appear to be a difference (though maybe I'm missing something).

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-10.0#bind-across-more-than-two-components

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/components/data-binding.md

Document ID

3f912dfc-5ba5-6c6c-ba93-1ae78508a5cc

Platform Id

ad2f661d-d520-a055-4a4e-26b9520e6ce3

Article author

@guardrex

Metadata

• ID: b211df59-e1c9-86c0-c904-31fa3c361e6d
• PlatformId: ad2f661d-d520-a055-4a4e-26b9520e6ce3
• Service: aspnet-core
• Sub-service: blazor

Related Issues

[github-actions]

🥳 Happy Holidays! 🍽️

Stand-by! A green dinosaur 🦖 will be along shortly to assist.