Blazor的@bind指令用于实现视图和数据的双向绑定，当数据发生变化时视图会自动更新，用户在视图上的操作也会同步修改对应的数据源，是Blazor前端开发中非常常用的功能。
@bind基础绑定用法
最基础的@bind用法是绑定组件的普通属性，比如绑定一个字符串类型的变量，当输入框内容变化时，绑定的变量会同步更新。
@page "/bind-demo"
<h3>基础双向绑定示例</h3>
<p>输入的内容：@UserName</p>
<input @bind="UserName" />
@code {
public string UserName { get; set; } = "默认名称";
}
上面的代码中，输入框和UserName属性实现了双向绑定，修改输入框内容后，上方的段落会同步显示最新的UserName值。
绑定指定事件
默认情况下@bind绑定的是onchange事件，也就是输入框失去焦点时才会更新数据源，如果需要实时更新，可以指定绑定的事件为oninput。
@page "/bind-event-demo"
<h3>指定绑定事件示例</h3>
<p>实时输入的内容：@InputContent</p>
<input @bind="InputContent" @bind:event="oninput" />
@code {
public string InputContent { get; set; } = "";
}
这里通过@bind:event="oninput"指定了绑定输入事件，输入框内容每变化一次，InputContent就会立即更新。
绑定组件属性
@bind也可以用于绑定子组件的属性，实现父子组件之间的双向数据同步，子组件需要定义对应的属性和事件回调。
首先定义子组件CustomInput.razor：
<input value="@Value" @oninput="OnInput" />
@code {
[Parameter]
public string Value { get; set; }
[Parameter]
public EventCallback<string> ValueChanged { get; set; }
private async Task OnInput(ChangeEventArgs e)
{
var newValue = e.Value?.ToString() ?? "";
await ValueChanged.InvokeAsync(newValue);
}
}
父组件中使用该子组件并绑定属性：
@page "/parent-demo"
<h3>组件双向绑定示例</h3>
<p>绑定的值：@ParentValue</p>
<CustomInput @bind-Value="ParentValue" />
@code {
public string ParentValue { get; set; } = "初始值";
}
子组件的属性名是Value，对应的事件回调必须命名为ValueChanged，父组件使用@bind-Value就可以实现双向绑定，修改子组件的输入框内容，父组件的ParentValue会同步更新。
@bind和@bind-value的区别
很多开发者会混淆@bind和@bind-value的用法，两者的核心区别在于绑定的属性不同：
@bind="PropertyName"是绑定组件的Value属性，等价于@bind-value="PropertyName"，是简写形式- 如果需要绑定组件的非Value属性，就需要使用
@bind-属性名="PropertyName"的格式，比如绑定子组件的Title属性：@bind-Title="TitleValue"
自定义双向绑定格式
如果需要处理特殊格式的双向绑定，比如日期格式化，可以通过@bind:format指定格式。
@page "/format-demo"
<h3>日期格式化绑定示例</h3>
<p>选择的日期：@SelectDate</p>
<input type="date" @bind="SelectDate" @bind:format="yyyy-MM-dd" />
@code {
public DateTime SelectDate { get; set; } = DateTime.Now;
}
上面的代码指定了日期的显示格式为yyyy-MM-dd，输入框会按照该格式显示和解析日期内容。
注意事项
- 绑定的属性必须是公开的，并且有对应的get和set访问器，否则无法实现双向绑定
- 子组件实现双向绑定时，事件回调的参数类型必须和属性的类型一致，否则会报错
- 不要在绑定属性的set访问器中做复杂的耗时操作，避免影响视图更新性能