Skip to content

Blazor two-way binding across more than two components (clarification on this documentation) #57962

Open

Description

Hi,

I see the contributing guidelines encourage general feedback and discussions here, so hopefully this is the place for this question.

This is regarding the Bind across more than two components example in the documentation.

I've been reading these pages a lot in the past few days, trying to get my head around the details, and there's one thing I'm not clear on:

In the example linked above, where the NestedChild.razor component is essentially acting as a pass-through between the Parent2.razor and NestedGrandchild.razor components, is there a meaningful difference between what the example shows by using @bind:get/@bind:set modifiers:

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

And something like this, where I'm passing down the parameter and event callback as "normal":

    <NestedGrandchild GrandchildMessage="ChildMessage" 
        GrandchildMessageChanged="ChildMessageChanged" />

?

My understanding so far is leading me to believe that the exact way that the example is written, to use the @bind:get and @bind:set modifiers, is not actually necessary in this case, and it's not necessary because of the way the NestedChild.razor component happens to have its parameter/callback matching the type (string) of the NestedGrandchild.razor component's parameter/callback, and isn't:

  • Giving the NestedGrandchild.razor component anything different to its own ChildMessage parameter value on the way down
  • Changing the string given by NestedGrandchild.razor's GrandchildMessageChanged event callback on the way up

In other words, I think I can see why the bind syntax should be used for example if the NestedChild.razor component wanted to transform the string given by the NestedGrandchild.GrandchildMessageChanged event callback, before in turn passing it up to the Parent2.razor component via the NestedChild.ChildMessageChanged event callback.

But in the way that the example is actually written, where no such transformations are going on, I guess my main question is whether there's a reason why the @bind syntax should be used in this kind of scenario, as opposed to using the other example snippet I gave where the straight passing-through of the parameter and callback is done from child to grandchild component?

(The reason I ask is that I have this exact situation in the code I'm working on, and the current implementation is using the passing through of parameters and callbacks approach, without @bind, and so I'm trying to figure out if I'm missing something important by not having this code follow the way the documentation example is written.)

Hopefully that's a clear enough explanation, thanks in advance for any clarification on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    DocsThis issue tracks updating documentationarea-blazorIncludes: Blazor, Razor Components

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions