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

Posted 2023-03-27

【中文标题】@bind 和 @bind-value 之间的区别

【英文标题】：Difference between @bind and @bind-value

【发布时间】：2020-02-01 22:29:34

【问题描述】：

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

【参考方案1】：

短版

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

这两个命令是等价的：

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

加长版

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

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

表达式和委托都是必需的。 @bind-Value 的实现如下所示：

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

我们正在设置 both 表达式 (="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 版本的几个常见用例是

根据用户类型更新 UI 验证电子邮件地址作为用户类型

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

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

【讨论】：

有没有办法同时指定一个调用 get 的回调？我知道我们可以只设置 value"MyValue" @onchange="myCallback" 但它在更新时不一致。我认为不建议在 MyValue 集（在这种情况下是组件参数）上调用它。

@bind-value="userName" 也将默认为onchange。 2.没有区别。

【参考方案2】：

引用Component Binding docs：

到组件和 DOM 元素的数据绑定是通过 @bind 属性完成的。 (...) 使用 @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 的情况下使用 @bind-value:event（仅使用 @bind），则会引发预编译错误：

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

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

【讨论】：

所以这意味着它是一样的，但是如果你想添加额外的功能（:event），你需要使用@bind-value？

@Vencovsky ，这是我从文档中了解到的以及测试确认的内容。

您是否也有文档没有解释那么多的感觉？有些东西有点模糊

我同意这个

看起来我们也可以做到 @bind="CurrentValue" @bind:event="oninput" ！观看此视频：youtube.com/watch?v=GRN30_Q2h_Y 这再次问我 @bind 和 @bind-value

之间的真正区别是什么

【参考方案3】：

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