[英]Difference between @bind and @bind-value
What is the difference of using @bind
and @bind-value
?使用
@bind
和@bind-value
有什么区别?
I made this simple example, and testing it in the browser, I didn't see any difference.我做了这个简单的例子,并在浏览器中测试它,我没有看到任何区别。
<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;
}
@bind
is an override of @bind-value
with the event set to "onchange". @bind
是@bind-value
的覆盖,事件设置为“onchange”。
These two commands are equivalent:这两个命令是等价的:
... @bind-value="userName" @bind-value:event="onchange" ...
... @bind="userName" ...
The @bind
attribute accomplishes two separate (but related) tasks: @bind
属性完成两个独立(但相关)的任务:
<Input...
component<Input...
组件的值ValueChanged
propertyValueChanged
属性的委托Both the expression and the delegate are required .表达式和委托都是必需的。 An implementation of
@bind-Value
looks like this: @bind-Value
的实现如下所示:
... @bind-value="userName" @bind-value:event="onchange" ...
We are setting both the expression ( ="userName"
) and the delegate ( ="onchange"
).我们正在设置表达式 (
="userName"
)和委托 ( ="onchange"
)。
The "easier" @bind=
is just an override with the delegate preset to "onchange". “更简单”的
@bind=
只是将委托预设为“onchange”的覆盖。 So these two commands are functionally the same:所以这两个命令在功能上是一样的:
... @bind-value="userName" @bind-value:event="onchange" ...
... @bind="userName" ...
A greatly simplified analogy using overriding methods:使用重写方法的一个大大简化的类比:
public void bind-value(string value, string event)
{..}
public void bind(string value)
{
bind-value(value, "onchange");
}
A couple of common use-cases for using the full @bind-value
version are使用完整
@bind-value
版本的几个常见用例是
Remember, the onchange
event will only trigger PropertyChanged
when the component loses focus .请记住,
onchange
事件只会在组件失去焦点时触发PropertyChanged
。 Instead, we want PropertyChanged
to be triggered by the oninput
event:相反,我们希望
PropertyChanged
由oninput
事件触发:
... @bind-value="H1Content" @bind-value:event="oninput" ...
... @bind-value="email" @bind-value:event="oninput" ...
Quoting Component Binding docs:引用组件绑定文档:
Data binding to both components and DOM elements is accomplished with the
@bind
attribute.与组件和 DOM 元素的数据绑定是通过
@bind
属性完成的。 (...) Using@bind
with aCurrentValue
property (<input @bind="CurrentValue" />
) is essentially equivalent to the following:(...) 将
@bind
与CurrentValue
属性一起使用 (<input @bind="CurrentValue" />
) 本质上等同于以下内容:
<input value="@CurrentValue"
@onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value)" />
In addition to handling onchange events with
@bind
syntax, a property or field can be bound using other events by specifying an@bind-value
attribute with an event parameter (@bind-value:event
).除了使用
@bind
语法处理 onchange 事件之外,还可以通过使用事件参数 (@bind-value:event
) 指定@bind-value
属性来使用其他事件绑定属性或字段。 (onchange
,oninput
)(
onchange
,oninput
)
Summarizing总结
If you want to reset binded value on each input change (instead to set all changes at once on lost input focus) you should to use @bind-value
and oninput
on @bind-value:event
:如果您想在每次输入更改时重置绑定值(而不是在失去输入焦点时立即设置所有更改),您应该在
@bind-value:event
上使用@bind-value
和oninput
:
<input @bind-value="CurrentValue"
@bind-value:event="oninput" />
If you try to use @bind-value:event
without @bind-value
(using just @bind
) a pre-compiling error is raised:如果您尝试在没有
@bind-value
情况下使用@bind-value:event
(仅使用@bind
),则会引发预编译错误:
error RZ10004: Could not find the non-parameterized bind attribute that corresponds to the attribute 'bind-value:event'
错误 RZ10004:找不到对应于属性“绑定值:事件”的非参数化绑定属性
But the XXX.razor.g.cs
generated file is the same for @bind
and @bind-value
.但是
XXX.razor.g.cs
生成的文件对于@bind
和@bind-value
是相同的。
There is not any significant deference between these two.这两者之间没有任何显着差异。 The you can use @bind-value and @bind-value:event or you can use @bind and @bind:event pairs arbitrary.
你可以使用@bind-value 和@bind-value:event 或者你可以任意使用@bind 和@bind:event 对。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.