At this point we have a component displaying inside a page, but the content is constant, and non-interactive. What we really want is to be able to output content dynamically.
If we alter the contents of MyFirstComponent.razor we can introduce a private member and
output the value of that member using the @ symbol.
<div>
CurrentCounterValue in MyFirstComponent is @CurrentCounterValue
</div>
@code {
private int CurrentCounterValue = 42;
}
Receiving values via Parameters
CurrentCounterValue within the component always shows the value "42",
but what if we wanted the parent component to tell us which value to show?
To demonstrate this, create a new component named MySecondComponent and copy the mark-up from MyFirstComponent,
then change the private member to a public property.
<div>
CurrentCounterValue in MySecondComponent is @CurrentCounterValue
</div>
@code {
public int CurrentCounterValue { get; set; }
}
Edit the Counter.razor page in Components/Pages/, add a MySecondComponent component, and set its CurrentCounterValue, like so:
<MySecondComponent CurrentCounterValue=@currentCount/>
Attempting to build the app will now give a compile-time error.
The component parameter 'CurrentCounterValue' is not defined by 'MySecondComponent'.
This tells us clearly what is missing.
To add a parameter to our component we must decorate our component's property with a [Parameter] attribute.
<div>
CurrentCounterValue in MySecondComponent is @CurrentCounterValue
</div>
@code {
[Parameter]
public int CurrentCounterValue { get; set; }
}
This informs Blazor we want a parameter on our component that is settable via what looks like an HTML attribute.
Whenever the parent component is rerendered, Blazor will also rerender any child component it provides parameter values to. This ensures the child component is rerendered to represent any possible change
in the state passed down to the component via a [Parameter] decorated property.
If we run our application again and navigate to the Counter page, we'll see that whenever the currentCount in the
Counter page changes it will push that change down to our embedded component via its CurrentCounterValue property.
Note: Parameters must be public properties.
Additionally, we can decorate a parameter with [EditorRequired] to indicate that the consuming component must supply a value for it. The compiler will issue a warning if the parameter is omitted.
[EditorRequired, Parameter]
public int CurrentCounterValue { get; set; }