c# - @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属性完成两个独立(但相关)的任务:

将表达式绑定(bind)到 <Input... 的值组件

绑定(bind)将触发组件的 ValueChanged 的委托(delegate)房产

表达式和委托(delegate)都是 必填 . @bind-Value 的实现看起来像这样:

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

我们正在设置表达式( ="userName")和委托(delegate)( ="onchange")。
“更容易” @bind=只是一个 覆盖 委托(delegate)预设为“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 的几个常见用例版本是

在用户键入

时更新 UI

在用户键入

时验证电子邮件地址

请记住， onchange事件只会触发 PropertyChanged当组件失去焦点时。相反，我们想要 PropertyChanged由 oninput 触发事件:

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