@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...的值component
2. Binds将触发组件的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

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

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

Answer 2

引用Component Binding文档：

组件和DOM元素的

数据绑定是通过@bind属性完成的。(...)使用具有CurrentValue属性(<input @bind="CurrentValue" />)的@bind实质上等同于以下操作：

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

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

总结

如果您想在每个输入更改上重置绑定值(而不是在丢失的输入焦点上一次设置所有更改)，则应该在@bind-value:event上使用@bind-value和oninput

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

如果您尝试在不使用@bind-value的情况下使用@bind-value:event (仅使用@bind )，则会引发预编译错误：

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

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

Answer 3

这两者之间没有任何显著的差异。你可以使用@bind-value和@bind-value:event，也可以任意使用@bind和@bind:event对。