【Radzen.Blazor】@bind-valueってなにもの？

概要

Radzen.Blazorのテンプレートを見てると、たびたび出てくる@bind-valueというオプションですが、リファレンスで検索してもひっかかりません…
一体こいつは何者なのでしょうか…？

Radzen.Blazorのテンプレート　→　https://blazor.radzen.com/datagrid
Radzen.Blazorのリファレンス　→　https://blazor.radzen.com/docs/api/Radzen.Blazor.html

@bind-valueとは

@bind-valueとは、Radzen.Blazorコンポーネントに関連付ける変数を指定するオプションになります！

…詳しく説明します。

①@bind-valueには変数を指定することができ、値を指定することはできない。

bind-value.razor

// 変数を指定することができる
<RadzenTextBox @bind-value="@sample"/>

// エラー：値を指定することはできない
// Tha assignment target must be an assignable variable, property or indexer
<RadzenTextBox @bind-value="100"/>

@code
{
    string sample = "100";
}

②コンポーネントは@bind-valueを参照し、コンポーネントに入力した値は@bind-valueに代入される。

bind-value.razor

// ページ起動時、@bind-valueの値を参照する
// コンポーネントに入力した値は、@bind-valueに代入される
<RadzenTextBox @bind-value="@sample"/>
<h3>@sample</h3>

@code
{
    string sample = "100";
}

③コンポーネントのTValueと型が一致する必要がある。

bind-value.razor

// エラー：TValueと@bind-valueの型を一致する必要がある
// InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Int32'.
<RadzenNumeric TValue="int" @bind-value="@sample"/>
<h3>@sample</h3>

// 対処法：ValueやValueChangedを使用することで同様の処理を実行できる
// Valueコンポーネントがページ起動時に参照する値
// ValueChanged：コンポーネントに値を入力したときに実行する処理
<RadzenNumeric TValue="int" Value="@int.Parse(sample)" ValueChanged="@(args => sample = args.ToString())"/>
<h3>@sample</h3>

@code
{
    string sample = "100";
}

まとめ

@bind-valueオプションは次のような場面で活用できると思います。

• Radzen.Blazorコンポーネントに入力する値を動的に決定したいとき
• Radzen.Blazorコンポーネントを複数使用するとき
• etc…

自分の経験に基づいて書いたものなので、細かい表現など適切ではない場合があります。
間違ってる部分が見つかりましたら、コメントで指摘していただけますと幸いです。