What is Cascading parameter and value?

• In some scenarios, it’s inconvenient to flow data from an ancestor component to a descendent component using component parameters, especially when there are several component layers. Cascading values and parameters solve this problem by providing a convenient way for an ancestor component to provide a value to all of its descendent components
• Cascading values and parameters are a way to pass a value from a component to all of its descendants without having to use traditional component parameters
• Cascading values are helpful in situations where the same set of values must be passed along the hierarchy of a complex component made of multiple sub-components
• Links:
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters
  • https://chrissainty.com/understanding-cascading-values-and-cascading-parameters/

Basic Usage

Main.razor

<CascadingValue Value="@Name">
    <FooComponent></FooComponent>
    <BarComponent></BarComponent>
</CascadingValue>

@code {
    int Name = "hovermind";
}

FooComponent.razor

<h1>Foo Component</h1>

<p>Parent name: @ParentName</p>

@code {
    [CascadingParameter] string ParentName { get; set; }
}

BarComponent.razor

<h1>Bar Component</h1>

<p>Parent name: @ParentName</p>

@code {
    [CascadingParameter] string ParentName { get; set; }
}