Diferencia entre @bind y @ bind-value

Solución:

Version corta

@bind es una anulación de @bind-value con el evento establecido en “onchange”.

Estos dos comandos son equivalentes:

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

Versión larga

los @bind atributo realiza dos tareas separadas (pero relacionadas):

1. Vincula una expresión al valor de la <Input... componente
2. Vincula un delegado que activará el componente ValueChanged propiedad

Ambos la expresión y el delegado son requerido. Una implementación de @bind-Value Se ve como esto:

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

Nos estamos poniendo ambos la expresion (="userName") y el delegado (="onchange").

Lo más fácil” @bind= es solo un anular con el delegado preestablecido en “onchange”. Entonces, estos dos comandos son funcionalmente iguales:

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

Una analogía muy simplificada que utiliza métodos primordiales:

public void bind-value(string value, string event)
{..}

public void bind(string value)
{
  bind-value(value, "onchange");
}

Un par de casos de uso comunes para usar el @bind-value la versión es

1. actualizar la interfaz de usuario como los tipos de usuario
2. validar una dirección de correo electrónico como los tipos de usuario

Recuerda el onchange el evento solo se activará PropertyChanged cuando el componente pierde el enfoque. En cambio, queremos PropertyChanged para ser activado por el oninput evento:

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

Citando documentos de enlace de componentes:

La vinculación de datos a ambos componentes y elementos DOM se logra con el @bind atributo. (…) Utilizando @bind con un CurrentValue propiedad (<input @bind="CurrentValue" />) es esencialmente equivalente a lo siguiente:

<input value="@CurrentValue"
       @onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value)" />

Además de manejar eventos onchange con @bind sintaxis, una propiedad o campo se puede vincular utilizando otros eventos especificando un @bind-value atributo con un parámetro de evento (@bind-value:event). ( onchange, oninput )

Resumiendo

Si desea restablecer el valor enlazado en cada cambio de entrada (en lugar de establecer todos los cambios a la vez en el foco de entrada perdido), debe usar @bind-value y oninput sobre @bind-value:event:

<input @bind-value="CurrentValue" 
       @bind-value:event="oninput" />

Si intentas usar @bind-value:event sin @bind-value (usando solo @bind ) se genera un error de compilación previa:

error RZ10004: No se pudo encontrar el atributo de vinculación no parametrizado que corresponde al atributo ‘valor de vinculación: evento’

Pero el XXX.razor.g.cs archivo generado es el mismo para @bind y @bind-value.

---

---

Utiliza Nuestro Buscador