Blazor 怎么进行数据绑定

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

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

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

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

比如
<p>当前计数:@count</p>
,即使用户在页面上点按钮调用了
count++
,页面才会更新;但你手动改了页面上的数字,
count
变量完全不受影响
注意:它不监听输入事件,也不触发重渲染 —— 渲染只发生在组件逻辑执行完之后(比如点击事件处理完)

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

@bind 是最常用的数据绑定方式,本质是

@bind-value
+
@bind-value:event
的语法糖,适用于
<input>
<select></select>
<textarea></textarea>
等表单控件。

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

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

处理多字段表单时,推荐用

<editform></editform>
组件,它配合模型类和验证系统更可靠。

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

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

父组件想把值传给子组件,又希望子组件改值时父组件也同步,就得用

@bind
的扩展写法。

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

基本上就这些。不复杂但容易忽略的是事件时机(onchange vs oninput)、EditForm 的绑定粒度、以及自定义组件里

ValueChanged
必须显式调用 —— 这三点踩坑最多。

相关推荐