Blazor 怎么进行数据绑定

Blazor数据绑定分单向（@）和双向（@bind）：单向仅代码驱动ui更新，适合只读展示；双向自动同步UI与变量，支持onchange/oninput事件定制、EditForm表单验证及自定义组件@bind-Value+EventCallback传值。

Blazor 的数据绑定核心就两条路：单向显示用 @，双向同步用 @bind。关键不是记语法，而是分清“谁驱动谁”——是代码改 UI，还是 UI 改代码，或者两边都要动。

单向绑定：只让代码值影响 UI

用 @变量名 直接把 C# 值插入 html，UI 不会反过来改这个变量。适合展示状态、标题、时间这类只读内容。

• 比如

  当前计数：@count

  ，即使用户在页面上点按钮调用了 count++，页面才会更新；但你手动改了页面上的数字，count 变量完全不受影响

• 注意：它不监听输入事件，也不触发重渲染 —— 渲染只发生在组件逻辑执行完之后（比如点击事件处理完）

双向绑定：@bind 让 UI 和变量自动同步

@bind 是最常用的数据绑定方式，本质是 @bind-value + @bind-value:event 的语法糖，适用于 、、 等表单控件。

• 默认绑定到 onchange 事件：比如文本框中输完按失焦或回车，才更新变量
• 想实时响应（每敲一个字就更新），改成 @bind-value:event="oninput"
• 复选框（）自动绑定 checked 属性，不用额外写 @bind-value

绑定到复杂对象或表单：用 EditForm

处理多字段表单时，推荐用 组件，它配合模型类和验证系统更可靠。

• 给 EditForm 指定 Model（比如一个 TodoItem 实例），内部所有 、 都能用 @bind-Value 绑定到对应属性
• 支持级联的验证上下文（EditContext），错误提示、脏检查、提交拦截都内置好了
• 别直接对 Model 字段做 @bind="Model.Title"，应使用 ，否则验证和变更跟踪会失效

自定义组件间传值：靠 @bind + EventCallback

父组件想把值传给子组件，又希望子组件改值时父组件也同步，就得用 @bind 的扩展写法。

• 子组件声明两个参数：[Parameter] public String Value { get; set; } 和 [Parameter] public EventCallback ValueChanged { get; set; }
• 父组件调用时写成 ，Blazor 会自动把 userName 当作 Value，同时把赋值回调注入 ValueChanged
• 子组件内部修改值时，必须调用 ValueChanged.InvokeAsync(newVal)，否则父组件收不到更新

基本上就这些。不复杂但容易忽略的是事件时机（onchange vs oninput）、EditForm 的绑定粒度、以及自定义组件里 ValueChanged 必须显式调用 —— 这三点踩坑最多。