パラメータ ― 親から子へ値を渡す [Parameter]

導入

同じ見た目の部品を、中身だけ変えて何度も使いたい——そのために、親コンポーネントから子へ値を渡す仕組みが[Parameter]です。メソッドの引数の、コンポーネント版と考えてください。

説明

子コンポーネント側で[Parameter]を付けたプロパティを公開すると、親からHTML属性のように値を渡せます。

@* --- Card.razor（子・再利用される部品） --- *@
<div class="card">
    <h4>@Title</h4>
    <p>@Message</p>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public string Message { get; set; } = "";
}

@* --- 親ページでの使い方 --- *@
<Card Title="お知らせ" Message="明日は休業です" />
<Card Title="警告"   Message="在庫が残りわずかです" />

flowchart TB
    P["親コンポーネント"] -->|Title / Message| C1["Card（インスタンス1）"]
    P -->|Title / Message| C2["Card（インスタンス2）"]

[Parameter] public 型名前 { get; set; }で「親から受け取る入口」を作る
親は<Card Title="..." Message="..." />と属性のように値を渡す
同じCardを異なる値で何度も再利用できる（「1クラス→複数オブジェクト」のUI版）

このサイトのライブプレビューは1つの.razorを描画するもので、<Card />のような自作コンポーネントの組み合わせは実際のプロジェクト（dotnet new）で試します。

まとめ

[Parameter]で親から子へ値を渡す
親は属性の形で値を渡し、同じ部品を再利用する
「メソッド引数のコンポーネント版」と捉える

次回: 逆方向——子から親への通知（EventCallback）です。