Blazor學習記錄三

11.自定義組件與消費端變量之間實現雙向綁定

這也實現了從子組件到父組件的狀態傳遞。

1.定義一個數據類型爲T的參數。
2.再定義一個 參數名+[Changed]爲名稱，EventCallback結構類型的參數。注意T類型要和第一步中的參數數據類型T相同。
3.定義一個被用於元素中的C#事件觸發的事件方法OnChanged，並在該事件方法中調用第2步中定義的EventCallback結構類型參數中的InvokeAsync(Text)成員方法。
4.寫出元素中C#事件代碼並綁定第3步中的事件方法。

注意： 3、4兩步也可以以在4中寫出lambda表達式的形式合成一步

這樣做之後，則在組件的消費者調用端會按約定在組件內出現一個 @bind-[1步中參數名] 的綁定參數。
5. 以 @bind-[參數名]="[消費者中變量名]" 的形式將消費者變量與自定義組件的綁定參數相綁定即可。

代碼如下：

• 自定義組件代碼：

<input type="text" value="@Text" @onchange="Onchanged" />
@code
{
    [parameter]public string? Text {get;set;}
    [parameter]public EventCallback<string?> TextChanged {get;set;}
    Task Onchanged(ChangeEventArgs e)
    {
        Text = e.Value?.ToString();
        TextChanged.InvokeAsync(Text);
        return Task.CompletedTask;
    }
}

• 消費者代碼或說調用者代碼：

@page "/custom-bind"
<CustomComponent @bind-Text="ConsumerVariate" />
<h3>@ConsumerVariate<h3>
@code
{
    string? ConsumerVariate {get;set}
}