Blazor @bind 双向绑定使用方法

@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 EventCallback MyValueChanged {get; set;}
• 在子组件内部，当值改变时主动调用：MyValueChanged.InvokeAsync(newVal);
• 父组件使用：，Blazor 自动完成双向连接
• 关键点：事件名必须是 参数名 + "Changed"，否则会报 InvalidOperationException

绑定复杂对象属性或表单字段

@bind 支持链式访问，可直接绑定到模型对象的属性，适合表单场景：

• 、
• 确保 person 已初始化（如 private Person person = new();），否则运行时报空引用
• 在 EditForm 中也可结合 @bind-Value 使用，但推荐统一用 @bind 保持简洁

基本上就这些。不复杂但容易忽略细节，比如事件命名规则、默认触发时机、以及只支持 value 属性的限制。用对了，数据流就清晰可控。