Blazor @bind 双向绑定使用方法

来源:这里教程网 时间:2026-02-21 17:36:53 作者:

@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 属性的限制。用对了,数据流就清晰可控。

相关推荐