上一篇寫資料系結的文章，寫到最后留了一個坑，當子組件系結父組件的一個欄位，并且子組件修改它的時候父組件不能實時進行同步更新UI的問題，最近終于在Blazui作者的指導下搞定了，
UserInfo類要實作INotifyPropertyChanged介面
public class UserInfo: INotifyPropertyChanged
{
private string _userName;
public string UserName {
get
{
return _userName;
}
set
{
_userName = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(UserName)));
}
}
public string Sex { get; set; }
public DateTime BrithDay { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
}
沒想到微軟blazor還是借用了WPF搞MVVM的模式，模型需要實作INotifyPropertyChanged類，在屬性發生修改的時候可以發出通知，
父組件訂閱PropertyChanged事件：
@page "/"
====================parent```==================
<p>
userName: @userInfo.UserName
</p>
<p>
sex: @userInfo.Sex
</p>
<p>
brithday: @userInfo.BrithDay
</p>
<p>
title: @title
</p>
<InfoEdit UserInfo="userInfo" UserInfoChanged="HandleUserInfoChanged"></InfoEdit>
@code {
private UserInfo userInfo;
private string title;
protected override void OnInitialized()
{
userInfo = new UserInfo
{
UserName = "abc",
Sex = "f",
BrithDay = DateTime.Now
};
this.userInfo.PropertyChanged += (o, e) => StateHasChanged();
base.OnInitialized();
}
private void HandleUserInfoChanged(UserInfo info)
{
this.userInfo = info;
Console.WriteLine("HandleUserInfoChanged");
}
}
父組件訂閱子組件的PropertyChanged事件，當事件發生的時候呼叫組件的StateHasChanged方法，StateHasChanged方法會通知組件說狀態發生變化了，也就是說組件會被重新渲染，這就是最關鍵的東西了，
子組件
====================child==================
<p>
userName: <input @bind="UserInfo.UserName" @bind:event="oninput" />
</p>
<p>
sex:
<select @bind="UserInfo.Sex">
<option value=https://www.cnblogs.com/kklldog/p/"m">男
BrithDay：
@code {
[Parameter]
public UserInfo UserInfo { get; set; }
[Parameter]
public EventCallback UserInfoChanged { get; set; }
private void InvokeChanged()
{
UserInfoChanged.InvokeAsync(this.UserInfo);
Console.WriteLine("InvokeChanged");
}
}
運行
一些吐槽
雖然搞定了子父組件同步的問題，但是我不能理解的是，為什么微軟要搞的這么復雜，使用@bind-UserInfo會強制用戶在子組件實作一個 EventCallback
關注我的公眾號一起玩轉技術
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/13532.html
標籤：.NET Core