Blazor（Razor 组件）从父组件刷新子组件

Question

我有一个简单的子 Blazor 组件（MyModal），如下所示：

<div class="modal">
    <h3>@Title</h3>
    @BodyTemplate
</div>

@code
{
    [Parameter] string Title { get; set; }
    [Parameter] RenderFragment BodyTemplate { get; set; }
}

在我的父组件中，我这样称呼它：

<MyModal Title="Super Cool Modal">
        <BodyTemplate>
            @MyObject.Name
        </BodyTemplate>
</MyModal>

public MyObject MyObject { get; set; } = new MyObject();

稍后在页面最初呈现后我更新，MyObject但引用的子组件本身@MyObject.Name永远不会更新。

似乎我必须在更新对象 ( StateHasChanged)后强制刷新子对象，但不确定如何使用此示例执行此操作。

Answer 1

你可以试试这个

孩子

创建一个可以从父级调用的公共刷新方法

<div class="modal">
    <h3>@Title</h3>
    @BodyTemplate
</div>

@code
{
    [Parameter] string Title { get; set; }
    [Parameter] RenderFragment BodyTemplate { get; set; }

    public void RefreshMe()
    {
        StateHasChanged();
    }
}

家长

调用子刷新方法

<MyModal Title="Super Cool Modal"
         @ref="ChildComponent">
        <BodyTemplate>
            @MyObject.Name
        </BodyTemplate>
</MyModal>
@code
{
   public MyObject MyObject { get; set; } = new MyObject();
   protected UploadDownloadComponent ChildComponent;

   //Call this method to update the child
   private void Change(TreeEventArgs args)
   {
       ChildComponent.RefreshMe();
   }
}