.NET › Blazor (Server & WebAssembly)

How do you pass data from a parent component to a child component in Blazor using [Parameter]?

Intermediate

Answer

A child component exposes public properties decorated with [Parameter], and a parent component sets them as attributes when using the child component in markup, similar conceptually to passing props in other component-based UI frameworks -- Blazor automatically re-renders the child whenever a bound parameter value changes.
<!-- ChildComponent.razor -->
@code {
    [Parameter] public string Message { get; set; } = "";
}
<p>@Message</p>

<!-- ParentComponent.razor -->
<ChildComponent Message="Hello from parent" />
Real-world example A reusable ProductCard component accepts a Product parameter from its parent product-list page, rendering consistent card markup for each item without duplicating layout code across every page that displays products.

Common follow-ups: How do you pass a callback from child back to parent using EventCallback?;What happens if a parameter value is mutated directly instead of reassigned?