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