How to get parent component from child component in .Net Maui Blazor Hybrid/Blazor

Question

For example, I have a home component, which is now shown in @body Inside home there is a child1 component, inside child1 there is a child2. In child2 I have a DoSomething method. How do I access child1 or home in this method? I only came up with the idea of creating a public static action DoSomethingInvoked in child2 and calling it in DoSomething. Accordingly, I can subscribe in home and child1 in onItialized and unsubscribe in Dispose. But it seems to me that this solution is clearly not the best and most likely there are some other implementation options. But I couldn't find anything special. Can you suggest some Microsoft documentation on this topic?

Answer 1

You can use cascading values to pass values down a hierarchy of components - this includes references to the top-level components themselves.

Suppose you have a parent component that contains child components (you haven't posted any code, so I have to come up with my own example).

ParentComponent.razor

<ChildComponent></ChildComponent>

You can use a <CascadingValue Value="SOME_VALUE"> that allows any descendant component to use whatever value is set. In this case I am going to set the value to be a reference to the parent component itself.

ParentComponent.razor

<CascadingValue Value="this">
  <ChildComponent></ChildComponent>
</CascadingValue>

The reference to the parent component can then be injected into the child components using a CascadingParameter attribute.

ChildComponent.razor

<div>Some child content</div>

@code {
  // This value will automatically be set
  // because the type matches. 
  // You can also name cascading values to disambiguate.
  [CascadingParameter]
  public ParentComponent Parent {get; set;}
}

This allows you to interact with the parent component from the child component.

You could add a public method to the parent component:

ParentComponent.razor

<ChildComponent></ChildComponent>
<h3>Messages</h3>
@foreach (string message in Messages)
{
    <div>@message</div>
}

@code {
    private List<string> Messages {get; set;} = new();

    public void Notify(string message)
    {
        Messages.Add(message);
        StateHasChanged();
    }
}

This can be called from the child:

ChildComponent.razor

<button @onclick="@OnButtonClick">Notify parent</button>

@code {
    [CascadingParameter]
    public Parent Parent {get; set;}

    private void OnButtonClick()
    {
        Parent.Notify("Hello from the child component");
    }
}

Working example: https://blazorfiddle.com/s/g98zn4zk

The docs: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-8.0