摘要：下面是支持的事件參數(shù)方法方法這里是組件間雙向綁定的另一種方法，我們可以基于任何事件方法的執(zhí)行手動(dòng)觸發(fā)一個(gè)，在中，用內(nèi)置函數(shù)手動(dòng)觸發(fā)屬性，同時(shí)回調(diào)父組件中相應(yīng)的方法，在父組件中，通過(guò)通知狀態(tài)已經(jīng)改變。

翻譯自：Study Blazor .NET，轉(zhuǎn)載請(qǐng)注明。

數(shù)據(jù)綁定

單向綁定

在blazor中單向綁定簡(jiǎn)單而直接，無(wú)需UI刷新或渲染。下面示例展示了單向數(shù)據(jù)綁定：

//Counter.razor@page "/counter"
Counter
Current count: @currentCount
Click me@functions {    int currentCount = 0;    void IncrementCount()    {        currentCount++;    }}

這里 @currentComponent 的值會(huì)根據(jù)點(diǎn)擊 Click me 按鈕的次數(shù)而增加。

標(biāo)簽元素的值會(huì)自動(dòng)刷新無(wú)需任何其它組件刷新。

雙向綁定

Blazor為雙向綁定提供多種選擇，與一些流行的JS語(yǔ)言相比實(shí)現(xiàn)起來(lái)更加優(yōu)雅。

相同組件中使用綁定

在blazor中，bind 特性支持雙向數(shù)據(jù)綁定，在下面的例子中，checkbox 在同一個(gè)組件中使用了 bind 屬性：

//TwoWayBind.razor@page "/two-way-binding"
This string will get value from above text field : @updateString.ToString()
@functions {    Boolean updateString {get; set;} = true;}

雙向數(shù)據(jù)綁定也能用lamda表達(dá)式通過(guò) onchange 特性實(shí)現(xiàn)。不用擔(dān)心，Blazor提供了綁定屬性的簡(jiǎn)單方法，更多細(xì)節(jié)如下：

//TwoWayBind.razor@page "/two-way-binding"
This string will get value from above text field: @updateString
@functions {    string updateString = "";}

bind 特性可以使用值和事件 bind-value- 進(jìn)行擴(kuò)展，上面的示例可以用 oninput 代替 onchange 重寫如下：

//TwoWayBind.razor@page "/two-way-binding"
This string will get value from above text field : @updateString
@functions {    string updateString = "";}

不同組件間使用綁定

方法 1

組件之間傳遞的數(shù)據(jù)通過(guò)組件屬性及其屬性映射完成，這種方法使用 Action 數(shù)據(jù)類型。

//ParentComponent.razor
 Parent Component
String in Parent: @parentString
Pass String To Child    @functions{    private string parentString = "Initial Parent String";    private void PassToChild()    {        parentString += "- To Child";    }    private void ReceivedFromChild(string str)    {        parentString = str;        StateHasChanged();    }}

//ChildComponent.razor
Child Component
Pass String to Parent
String received from Parent : @ToChild
@functions{    [Parameter]    private string ToChild{get;set;}    [Parameter]    Action FromChild{get;set;}         private string childString;        private void PassToParent()    {        childString = ToChild + "- To Parent";        FromChild(childString);    }}

ChildComponent中的 FromChild 特性/屬性用 Action 類型從子組件向父組件傳遞值。在父組件中有一個(gè)帶有 string 類型參數(shù)的響應(yīng)函數(shù)，ChildComponent組件中的按鈕點(diǎn)擊操作觸發(fā)這個(gè)函數(shù)，并且反過(guò)來(lái)通知 PassToParent 函數(shù)，為了通知父組件中的狀態(tài)已經(jīng)改變，我們使用了Blazor內(nèi)置函數(shù) StateHasChanged() 。

方法 2

這種方法使用 EventCallback 數(shù)據(jù)類型指定事件變更來(lái)傳遞信息從而代替具體的數(shù)據(jù)，這里不需要再調(diào)用 StateHasChanged() 函數(shù)。

//ParentComponent.razor
 Parent Component
Logging Event triggered from Child: @logString
    @functions{    private string logString = "";    private void TriggerFromChild(UIMouseEventArgs e)    {        logString = e.ToString();            }}

//ChildComponent.razor
Child Component
Trigger Parent@functions{    [Parameter]    private EventCallback Trigger { get; set; }     }

在ChildComponent中，Trigger 屬性回調(diào)ParentComponent中相應(yīng)的帶有 UIMouseEventArgs參數(shù)的TriggerFromChild 方法，同時(shí)在父組件中以字符串形式記錄。

下面是支持的事件參數(shù)：

• UIEventArgs
• UIChangeEventArgs
• UIKeyboardEventArgs
• UIMouseEventArgs

方法 3

這里是組件間雙向綁定的另一種方法，我們可以基于任何事件/方法的執(zhí)行手動(dòng)觸發(fā)一個(gè) Action ，

//ParentComponent.razor
 Parent Component
Logging Event triggered from Child: @logString
    @functions{    private string logString = "";    private void TriggerFromChild()    {        logString = "Triggered From Child using Action and Invoke";          StateHasChanged();          }}

//ChildComponent.razor
Child Component
Trigger Parent@functions{    [Parameter]    private Action EventFromChild{get;set;}    private void Trigger()    {        EventFromChild?.Invoke();    }       }

在ChildComponent中，用內(nèi)置函數(shù) Invoke 手動(dòng)觸發(fā) EventFromChild Action 屬性，同時(shí)回調(diào)父組件中相應(yīng)的 TriggerFromChild 方法，在父組件中，通過(guò) StateHasChanged() 通知狀態(tài)已經(jīng)改變。

級(jí)聯(lián)值和參數(shù)

Blazor提供了一種跨越整個(gè)RenderTree(所有組件)傳遞數(shù)據(jù)的方法，使用 CascadingValue 和 CascadingParameter 代替?zhèn)鬟f組件特性。傳遞的值可以被RenderTree (子組件)通過(guò)裝飾屬性 CascadingParameter 代替 Parameter 接收。

//RootComponent.razor@page "/base-component"
 App Base Component
                    @functions {    private string pName {get;set;} = "New To Blazor";    private int pAge {get;set;} =  35;}

//ParentComponent.razor
 Parent Component
 Profile Name is : @Name  and Age is : @Age.ToString(); 
@functions{    [CascadingParameter(Name = "ProfileName")]     string Name { get; set; }    [CascadingParameter(Name = "ProfileAge")]     int Age {get;set;}}

在 CascadingParameter 中，Name 參數(shù)必須與具有 CascadingValue 組件的 Name 屬性匹配，如果我們沒(méi)有聲明 Name，那么 CascadingParameter 中的變量類型與 CascadingValue 中的 Value 屬性匹配。

最好聲明 Name 參數(shù)，以避免混淆，這在應(yīng)用程序規(guī)模增長(zhǎng)時(shí)很有用。

渲染片段，動(dòng)態(tài)內(nèi)容

除了用特性從父組件向子組件傳遞內(nèi)容，還可以在組件的 tag 元素中傳遞內(nèi)容，并且可以使用 RenderFragment 屬性在子組件中呈現(xiàn)。

方式 1

ChildContent 是我們需要在子組件中使用的命名約定，以獲取父組件的內(nèi)容，

//ParentComponent.razor
 Parent Component
    The line here is passed to child from Parent!!!

//ChildComponent.razor
Child Component
@ChildContent
@functions{    [Parameter]    private RenderFragment ChildContent { get; set; }   }

方式 2

RenderFragment 主要用于模板化目的，并基于子組件內(nèi)部的邏輯呈現(xiàn)內(nèi)容。

//ParentComponent.razor
 Parent Component
            
            Bold Text here!!!        
        

//ChildComponent.razor
Child Component
    @for(var i = 1; i <= 3; i++)    {        
Line No : @i
        
@SampleText
    }
@functions{    [Parameter]    private RenderFragment SampleText { get; set; }   }

此時(shí) SampleText 不是已經(jīng)存在的組件，它是在父組件中的 ChildComponent tag元素中新生成的，同時(shí)在子組件中也聲明了相同的命名為 SampleText 的屬性。

SampleText 中的文本在子組件里循環(huán)渲染3次，這非常有助于創(chuàng)建模板組件、表格等。