@bind和@ bind-value之间的区别 [英] Difference between @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是@bind-value的替代，事件设置为"onchange".

Short Version

@bind is an override of @bind-value with the event set to "onchange".

这两个命令是等效的:

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

长版

@bind属性完成两项单独的(但相关的)任务:

Long Version

The @bind attribute accomplishes two separate (but related) tasks:

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

1. Binds an expression to the value of the <Input... component
2. Binds a delegate that will trigger the component's ValueChanged property

两者表达式和委托都是必需的. "@ bind-Value"的实现如下所示:

Both the expression and the delegate are required. An implementation of '@bind-Value` looks like this:

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

我们要同时设置表达式(="userName")和委托(="onchange").

We are setting both the expression (="userName") and the delegate (="onchange").

简易" @bind=只是一个替代，其委托预设为"onchange".因此，这两个命令在功能上是相同的:

The "easier" @bind= is just an override with the delegate preset to "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");
}

使用完整的@bind-value版本的几个常见用例是

A couple of common use-cases for using the full @bind-value version are

1. 根据用户键入的更新
2. 根据用户键入的电子邮件地址

1. updating the UI as the user types
2. validating an email address as the user types

请记住，onchange事件仅在组件失去焦点时触发PropertyChanged.相反，我们希望PropertyChanged由oninput事件触发:

Remember, the onchange event will only trigger PropertyChanged when the component loses focus. Instead, we want PropertyChanged to be triggered by the oninput event:

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

这篇关于@bind和@ bind-value之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！