时间戳

首页 > 解决方案 > @bind 和 @bind-value 之间的区别

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

问题描述

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

标签： c#asp.net-coreblazor

解决方案

精简版

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

推荐阅读