@bind 和 @bind-value 的区别

Question

使用@bind和 有@bind-value什么区别？

我做了这个简单的例子，并在浏览器中测试，我没有看到任何区别。

<p>@@bind @increment1</p>

<input 
    type="text"
    @bind="@increment1"
/>

<p>@@bind-value @increment2</p>
<input 
    type="text"
    @bind-value="@increment2"
/>

@code {
    string increment1;
    string increment2;
}

Answer 1

精简版

@bind是@bind-value事件设置为“onchange”的覆盖。

这两个命令是等效的：

 ... @bind-value="userName" @bind-value:event="onchange" ...
 ... @bind="userName" ...

长版

该@bind属性完成两个独立（但相关）的任务：

1. 将表达式绑定到<Input...组件的值
2. 绑定将触发组件ValueChanged属性的委托

两者的表达和委托被需要。的实现@bind-Value如下所示：

 ... @bind-value="userName" @bind-value:event="onchange" ...

我们设置两个表达式（="userName"）和委托（="onchange"）。

“更简单”@bind=只是一个覆盖，委托预设为“onchange”。所以这两个命令在功能上是一样的：

 ... @bind-value="userName" @bind-value:event="onchange" ...
 ... @bind="userName" ...

使用覆盖方法的一个大大简化的类比：

public void bind-value(string value, string event)
{..}

public void bind(string value)
{
  bind-value(value, "onchange");
}

使用完整@bind-value版本的几个常见用例是

1. 更新UI作为用户键入
2. 验证电子邮件地址作为用户类型

请记住，该onchange事件只会PropertyChanged在组件失去焦点时触发。相反，我们希望PropertyChanged被oninput事件触发：

... @bind-value="H1Content" @bind-value:event="oninput" ...
... @bind-value="email" @bind-value:event="oninput" ...

Answer 2

引用组件绑定文档：

到组件和 DOM 元素的数据绑定是通过@bind属性完成的。(...)@bind与CurrentValue属性 ( <input @bind="CurrentValue" />)一起使用本质上等同于以下内容：

<input value="@CurrentValue"
       @onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value)" />

除了使用@bind语法处理 onchange 事件之外，还可以通过使用@bind-value事件参数 ( @bind-value:event)指定属性来使用其他事件绑定属性或字段。( onchange, oninput)

总结

如果您想在每次输入更改时重置绑定值（而不是在丢失输入焦点时立即设置所有更改），您应该使用@bind-valueand oninputon @bind-value:event：

<input @bind-value="CurrentValue" 
       @bind-value:event="oninput" />

如果您尝试使用@bind-value:event不@bind-value（只使用@bind）一个编译预引发错误：

错误 RZ10004：找不到与属性“bind-value:event”相对应的非参数化绑定属性

但是XXX.razor.g.cs生成的文件与@bind和相同@bind-value。