blazor中 @bind 和 @bind-value 有什么区别

在Blazor中，@bind 和 @bind-value 都用于数据绑定，但它们有不同的使用场景和特性：

1. @bind（推荐的标准用法）

这是最常用的双向绑定方式，是简写语法。

<!-- 文本框绑定 -->
<input @bind="Name" />

<!-- 下拉框绑定 -->
<select @bind="SelectedValue">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

特点：

• 默认绑定到元素的 value 属性
• 默认在 onchange 事件触发时更新
• 简洁易用

2. @bind-value（更灵活的绑定）

允许你指定绑定的事件或其他选项。

<!-- 指定更新事件 -->
<input @bind-value="Name" @bind-value:event="oninput" />

<!-- 使用自定义格式 -->
<input @bind-value="Date" @bind-value:format="yyyy-MM-dd" />

主要区别

特性	@bind	@bind-value
语法	简写语法	完整语法
事件指定	默认 onchange	可通过 @bind-value:event 指定
格式化	不支持	可通过 @bind-value:format 格式化
使用场景	简单绑定	需要定制化绑定的场景

使用示例

实时更新（输入时立即更新）

<!-- 使用 @bind-value 实现实时更新 -->
<input @bind-value="SearchText" @bind-value:event="oninput" />

<!-- 等价于 @bind:after，在 .NET 7+ 中可用 -->
<input @bind="SearchText" @bind:event="oninput" />

日期格式化

<input type="date" @bind-value="BirthDate" @bind-value:format="yyyy-MM-dd" />

自定义组件绑定

<!-- 自定义组件 -->
<MyInput @bind-Value="UserName" />

<!-- 等价于 -->
<MyInput @bind-Value="UserName" @bind-Value:event="ValueChanged" />

推荐用法

1. 大多数情况：使用 @bind，更简洁
2. 需要实时更新：使用 @bind-value 并指定 oninput 事件
3. 需要格式化：使用 @bind-value 并指定 format
4. .NET 7+：可以使用 @bind 的新特性，如 @bind:after、@bind:get、@bind:set

.NET 7+ 的新语法

在 .NET 7 及以上版本，@bind 增加了更多功能：

<!-- 实时更新 -->
<input @bind="SearchText" @bind:event="oninput" />

<!-- 使用 get/set 逻辑 -->
<input @bind:get="Value" @bind:set="OnValueChanged" />

<!-- 绑定后执行操作 -->
<input @bind="Value" @bind:after="OnAfterBind" />

总结：@bind 是标准用法，@bind-value 提供了更多控制选项。在大多数情况下，使用 @bind 即可，需要特定功能时才使用 @bind-value。