@bind 是 Blazor 实现双向绑定的核心机制,用于同步输入控件与 C# 变量:支持 @bind="val" 简写、@bind:event 指定触发时机(如 oninput)、@bind-参数名 实现组件间绑定,且可链式绑定对象属性。

@bind 是 Blazor 中实现双向绑定最常用、最直接的方式,核心作用是让输入控件(如 input、select、textarea)的值与 C# 变量实时同步:用户改输入框,变量自动更新;变量在代码中被修改,输入框也立刻反映变化。
基础用法:@bind="变量名"
只需在支持 value 属性的 HTML 表单元素上添加 @bind="xxx" 即可。Blazor 会自动处理“读取值”和“写入值”两个方向。
-
@bind实际是@bind-value的简写,只适用于有value属性的元素(比如type="text"、type="number"、textarea、select) - 默认触发时机是
onchange事件,即输入框失去焦点(blur)或选择项确认后才更新变量 - 示例:
,其中你输入了:@name
private string name = "";在@code块中声明
实时响应:用 @bind:event 控制更新时机
如果希望变量随每次按键/输入立即更新(比如做实时搜索、字数统计),需显式指定事件为 oninput:
- 注意:
oninput在大多数现代浏览器中都支持,但onchange更稳妥(尤其兼容旧场景) - 其他可用事件包括
onblur、onkeyup等,按需选用
组件间双向绑定:@bind-参数名
父组件想把某个变量“可读可写”地传给子组件,不能只用 Parameter,而要配合命名约定使用 @bind-XXX:
- 子组件必须声明两个配套成员:
[Parameter] public string MyValue { get; set; }[Parameter] public EventCallbackMyValueChanged { get; set; } - 在子组件内部,当值改变时主动调用:
MyValueChanged.InvokeAsync(newVal); - 父组件使用:
,Blazor 自动完成双向连接 - 关键点:事件名必须是
参数名 + "Changed",否则会报InvalidOperationException
绑定复杂对象属性或表单字段
@bind 支持链式访问,可直接绑定到模型对象的属性,适合表单场景:
-
、 - 确保
person已初始化(如private Person person = new();),否则运行时报空引用 - 在
EditForm中也可结合@bind-Value使用,但推荐统一用@bind保持简洁
基本上就这些。不复杂但容易忽略细节,比如事件命名规则、默认触发时机、以及只支持 value 属性的限制。用对了,数据流就清晰可控。










