首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2020-06-11-ASP.NET Core Blazor 子组件父组件数据同步的问题

2020-06-11-ASP.NET Core Blazor 子组件父组件数据同步的问题

作者头像
MJ.Zhou
发布2020-06-19 11:09:13
1.1K0
发布2020-06-19 11:09:13
举报
文章被收录于专栏:.NET开发那点事.NET开发那点事

上一篇写数据绑定的文章,写到最后留了一个坑。当子组件绑定父组件的一个字段,并且子组件修改它的时候父组件不能实时进行同步更新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="m">男</option>
        <option value="f">女</option>
    </select>
</p>

<p>
    BrithDay:<input @bind="UserInfo.BrithDay" />
</p>

<button class="btn btn-danger" @onclick="InvokeChanged">保存</button>

@code {

    [Parameter]
    public UserInfo UserInfo { get; set; }

    [Parameter]
    public EventCallback<UserInfo> UserInfoChanged { get; set; }

    private void InvokeChanged()
    {
        UserInfoChanged.InvokeAsync(this.UserInfo);
        Console.WriteLine("InvokeChanged");
    }

}

运行

一些吐槽

虽然搞定了子父组件同步的问题,但是我不能理解的是,为什么微软要搞的这么复杂。使用@bind-UserInfo会强制用户在子组件实现一个 EventCallback UserInfoChanged 事件。那么既然@bind:event="oninput"可以实时回写字段的值,那么为什么不直接同时调用UserInfoChanged对外抛事件呢?而且在父组件同样可以在编译器直接植入对UserInfoChanged事件的监听同时刷新UI。可能是微软为了性能,想要用户手工控制父组件的渲染时机吧。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • UserInfo类要实现INotifyPropertyChanged接口
  • 父组件订阅PropertyChanged事件:
  • 子组件
  • 运行
  • 一些吐槽
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档