1.環(huán)境

VS2019 16.5.1

.NET Core SDK 3.1.200

Blazor WebAssembly Templates 3.2.0-preview2.20160.5

2.默認綁定

2.1.使用方法

Blazor中Razor組件通過(guò)一個(gè)名為@bind的HTML元素屬性提供數據綁定功能，數據綁定的對象可以為字段、屬性或表達式值。例如：

<input @bind="_bindValue1" />@code{private int _bindValue1 { get; set; } = 1;}

@bind默認綁定的是元素的onchange事件，通過(guò)在組件中添加一個(gè)元素p可以看出效果，每當input離開(kāi)focus或者回車(chē)時(shí)，p中的值才會(huì )更新：

<p>@_bindValue1</p>

2.2.等價(jià)單向綁定

由于@bind綁定的數據是強類(lèi)型，在從input的value到綁定的數據時(shí)，會(huì )做相關(guān)的數據轉換，如果轉換失敗，則會(huì )保持上次的值不變。也就是說(shuō)，默認綁定類(lèi)似于以下代碼：

<input value="@_bindValue1" @onchange="(e) => { _bindValue1 = int.TryParse(e.Value.ToString(), out var val) ? val : _bindValue1;}" />

之所以說(shuō)是類(lèi)似，是因為當無(wú)法轉換時(shí)，例如輸入的是小數123.1，當觸發(fā)onchange事件時(shí)，通過(guò)@bind綁定數據時(shí)，input中value會(huì )變回上一次的整數；而這種單向綁定時(shí)，input的value顯示的依然為123.1，不過(guò)通過(guò)C#獲取_bindValue1的值時(shí)，得到的與通過(guò)@bind綁定數據時(shí)的行為是一致的。在單向綁定時(shí)，即使使用StateHasChanged()，由于渲染引擎未發(fā)現狀態(tài)的變化，依然是不會(huì )改變顯示的值。

3.字符串格化

@bind可以使用@bind:format指定字符串的格式化表達式，個(gè)人覺(jué)得此功能有些雞肋，其支持的格式表達式較為有限，而且還具有一些其他的問(wèn)題，不知道是bug還是本身就這樣設計的，我目前已經(jīng)在A(yíng)spNetApiDocs提交了相關(guān)的反饋。

4.修改默認綁定事件

在有些時(shí)候，我們可能需要實(shí)時(shí)響應input中的輸入內容，例如搜索提示，這個(gè)時(shí)候需要相應input的oninput事件，@bind通過(guò)指定event參數來(lái)在指定綁定屬性或字段響應的事件，其形式為@bind:event="eventName"，例如：

<input @bind="_bindValue2" @bind:event="oninput" />

5.組件間的事件綁定

5.1.父組件到子組件

通過(guò)使用@bind-{PROPERTY}的形式，可以將屬性值從父組件向下綁定到子組件，其中PROPERTY必須為組件參數，例如在子組件中添加一個(gè)DateTime參數，要想使用@bind為此子組件在父組件中綁定數據，按照約定還必須定義一個(gè)名為事件{PROPERTY}Changed的事件，這個(gè)事件用于響應當子組件中更改組件參數時(shí)，子組件對數據的回調。代碼如下：

<input @bind="DateTime" @bind:format="yyyy-MM-dd HH:mm:ss" /><p>@DateTime.ToString("o")</p>[Parameter]public DateTime DateTime { get; set; } = DateTime.Now;[Parameter]public EventCallback<DateTime> DateTimeChanged { get; set; }

這樣就可以在父組件中使用如下代碼進(jìn)行數據綁定了：

<Component @bind-DateTime="_dateTime" />

這行代碼實(shí)際上等價(jià)于以下代碼：

<Component @bind-DateTime="_dateTime" @bind- DateTime:event=" DateTime Changed"/>

因此我們可以自定義上述約定中的默認事件{PROPERTY}Changed的名稱(chēng)，現在效果如下（請注意，此時(shí)如果子組件更新的參數，數據是無(wú)法流向父組件的）：

5.2.子組件到父組件

通常，參數流是從上往下的，即從父組件流到子組件，這是與渲染流程是保持一致的。因此當父組件更新子組件的組件參數時(shí)，往往子組件會(huì )很容易的進(jìn)行渲染，但是當子組件向父組件傳遞數據，則必須使用相應的回調事件。這種限制是組件設計必然結果。@bind在組件間進(jìn)行數據的雙向綁定正式通過(guò)在5.1.中的所介紹的{PROPERTY}Changed事件來(lái)向父組件進(jìn)行數據的傳遞的。

首先，在之前組件間事件綁定的代碼上為input的oninput事件添加響應函數ChangeParentValue：

private async Task ChangeParentValue(ChangeEventArgs e){var dateStr = e.Value.ToString();await DateTimeChanged.InvokeAsync(DateTime.Parse(dateStr));}

注意，在這里代碼并沒(méi)有直接更改本組件中的組件參數DateTime，因為父組件中更改了狀態(tài)后，會(huì )將該數據傳遞到子組件，子組件會(huì )重新渲染。按照微軟官方的代碼，這個(gè)是可以更改本組件中的組件參數DateTime的?，F在，效果如下：

本文參考：ASP.NET Core Blazor 數據綁定