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

短版

yourTime.getTime()是@bind的替代，事件设置为“ onchange”。

这两个命令是等效的：

@bind-value

长版

... @bind-value="userName" @bind-value:event="onchange" ... ... @bind="userName" ...属性完成两项单独的（但相关的）任务：

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

两者表达式和委托都是必需的。 ValueChanged的实现如下所示：

@bind-Value

我们要同时设置表达式（... @bind-value="userName" @bind-value:event="onchange" ...和委托（="userName"）。

“简易” ="onchange"只是一个替代，其委托预设为“ onchange”。因此，这两个命令在功能上是相同的：

@bind=

使用覆盖方法大大简化了类比：

 ... @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事件只会在组件失去焦点时触发onchange。相反，我们希望PropertyChanged由PropertyChanged事件触发：

oninput

Answer 2

引用Component Binding文档：

与组件和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-value上使用oninput和@bind-value:event：< / p>

<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文件是相同的。

@bind和@ bind-value之间的区别

2 个答案:

短版

长版