@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;
}

- Vencovsky

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" ...

- Shai Cohen

---

有没有一种方法可以指定被调用的回调函数？我知道我们可以设置只有值"MyValue" @onchange="myCallback"，但更新时它不太一致。在这种情况下，在设置MyValue（这是一个组件参数）时调用它似乎并不推荐。 - ScottexBoy

@bind-value="userName" 也会默认使用 onchange。这两者没有区别。 - Konrad

Answer 2

由于@dragon-warrior和@somedotnetguy的评论，已经修改。

ASP.NET >= Core 3.1

@bind-value:event不再需要用于事件。只需使用@bind:event。

ASP.NET Core 3.0

引用ASP.NET Core 3.0组件绑定（目前不可用）文档：

使用@bind属性即可将数据绑定到组件和DOM元素。 (...) @bind与CurrentValue属性一起使用（<input @bind="CurrentValue" />），基本上等同于以下内容：

<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:event而没有使用@bind-value（只使用@bind），则会引发预编译错误：

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

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

- dani herrera

---

这意味着它是相同的，但如果你想要添加额外的功能(:event)，你需要使用@bind-value吗？ - Vencovsky

@Vencovsky，这是我从文档中理解的内容，并且测试也证实了这一点。 - dani herrera

你是否也有这样的感觉，文档并没有解释得很清楚？有些东西还是有点模糊的。 - Vencovsky

看起来我们也可以使用 **@bind="CurrentValue" @bind:event="oninput"**！ 看看这个视频：https://www.youtube.com/watch?v=GRN30_Q2h_Y 这又让我想知道 @bind 和 @bind-value 之间的真正区别是什么。 - Dragon Warrior

感谢 @somedotnetguy 的评论。非常感激。回答已更新。 - dani herrera

Answer 3

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

- Farshid Saberi

---

似乎唯一的限制是，不能在同一元素上混合它们。 - somedotnetguy