Cascading parameter is a technique that let you pass a parameter from an ancestor component to its descendant components. In this tutorial, you will discover:
CascadingParameter
.You can download the example code used in this topic on GitHub.
CascadingParameter
The following steps will help you to pass a parameter from an ancestor component to the descendant components.
@code { public string Data { get; set; } = "Data from grand parent component."; }
CascadingValue
component to wrap the descendant components.<CascadingValue Value="Data"> <Parent /> </CascadingValue>
string
in this example) and use the CascadingParameter
attribute in the code section.@code { [CascadingParameter] public string ReceivedValue { get; set; } = ""; }
CascadingParameter
In the above example, Blazor Server will recognize the parameter from the ancestor component and the descendant components by the type of the parameter. For example, you can pass a string
, an int
from the ancestor component to the descendant components. Sometimes, you want to pass multiple parameters, regardless of their types.
@code { public string Data1 { get; set; } = "First data."; public string Data2 { get; set; } = "Second data."; }
CascadingValue
components to pass data. The order is irrelevant. By passing multiple parameters, the type is not considered as a factor to differentiate parameters. Instead, you have to name each passing parameter. By default, the passing parameter name is the name of the property in the ancestor component. You can rename your passing parameter by using Name
parameter in CascadingValue
component.<CascadingValue Value="Data1"> <CascadingValue Value="Data2" Name="CascadeParam2"> <Parent /> </CascadingValue> </CascadingValue>
In the code sample, the Data1
is a cascading parameter with the name Data1
and Data2
is a cascading parameter with the name CascadeParam2
. We will use Data1
and CascadeParam2
in the descendant components to catch the parameter.
CascadingParameter
attribute in the code section.@code { [CascadingParameter] public string Data1 { get; set; } = ""; [CascadingParameter(Name = "CascadeParam2")] public string ReceivedValue2AtParent { get; set; } = ""; }
You don't need to specify the passing parameter name (Data1
) when the name of the property matches with the passing parameter. When the passing parameter name (CascadeParam2
) doesn't match the property name (ReceivedValue2AtParent
) then you need to specify the parameter name in the attribute. For example: [CascadingParameter(Name = "CascadeParam2")]
.
When using the Cascading parameter technique, don't change the reference of a passed parameter in any descendant component. The following code in the descendant component illustrates this mistake:
@code { [CascadingParameter] public ExampleClass ReceivedValueAtParent { get; set; } = new(); public void Correct() { ReceivedValueAtParent.Data = "Value changed"; } public void Mistake() { ReceivedValueAtParent = new() { Data = "Reference changed" }; } }
The changed value only affects in the descendant component and not in another descendant nor ancestor component as the following video illustrates:
You can change the passed parameter value in the ancestor component and the descendant components. In this section, you will learn:
Anytime the ancestor component changes the value of a cascading parameter, the descendant components will be re-rendered. You can also listen to these changes by override the OnParametersSet()
method of your descendant component. See Component Lifecycle tutorial.
Whenever a descendant component changes the value of a cascading parameter, the ancestor will not be re-rendered, unlike changes from the ancestor component. To make the ancestor component reacts to the changes, you need to notify the ancestor component whenever you made a change in the descendant component.
@code { ... public void NotifyChange() { InvokeAsync(StateHasChanged); } }
this
to the descendant components.<CascadingValue Value="this"> <CascadingValue Value="ExampleInstance"> <Parent /> </CascadingValue> </CascadingValue>
@code { [CascadingParameter] public ExampleClass ReceivedValueAtParent { get; set; } = new(); [CascadingParameter] public GrandParent? Ancestor { get; set; } public void UpdateValue() { ReceivedValueAtParent.Data = "Value changed at parent"; Ancestor?.NotifyChange(); } }