Blazor 组件：如何从孙子到子子到父子或孙子到父子通信

编程问答 2022-04-21

问题描述

在我的 Blazor 服务器应用程序中，我有一个名为 Home 的页面，它基本上是一个搜索页面。在主页（“父”）上有一个带有控件的表单，用于过滤存储在后端数据库中的数据。搜索结果的每一行都有一个编辑按钮，显示一个引导对话框，允许编辑数据。 单击 UpdateDocumentNumber（孙子）组件上的“保存”按钮后，我想刷新主页（父）中的搜索结果。

  • 父级：带有搜索结果网格的主页（页面）；为每个项目嵌入一个 displayDocumentNumber 组件
  • Child：displayDocumentNumber 组件，它有自己的（子）UpdateDocumentNumber 组件
  • 孙子：UpdateDocumentNumber 组件 - 引导对话框

我的理解是我可以使用事件回调来做到这一点；但是，虽然我可以从孙子到子孙提出/调用事件回调，但我似乎无法从子孙那里通知父母。

更多细节...

当 Home（“父”页面）遍历返回的项目列表时，它插入一个 <displayDocumentNumber> 组件（“子”），然后 <displayDocumentNumber> 组件有一个组件来引用编辑对话框。这是遍历搜索结果的主页：

<tbody>
    @foreach (var documentNumber in DocumentNumbers)
        {
            <displayDocumentNumber DocumentNumber="documentNumber" /> // DocumentNumber parameter in displayDocumentNumber receives the data from the documentNumber local var
        }
</tbody>

这是 displayDocumentNumber 组件：

public partial class displayDocumentNumber : ComponentBase
{
    [Parameter]
    public DocumentNumberDto DocumentNumber { get; set; }
    [Parameter]
    public EventCallback<bool> OnDocumentNumberUpdatedEventCallback { get; set; }
}

注意 public EventCallback<bool> OnDocumentNumberUpdatedEventCallback { get; set; }。这从孙子到子子都可以正常工作。

displayDocumentNumber.razor 组件内部是为搜索结果中的每个文档编号呈现的行，包括一个具有 DOM 事件以显示引导对话框的编辑按钮。最后，如上所述，还有 <UpdateDocumentNumberDialog> 组件，即

<tr>
    <td>@DocumentNumber.Column1Name</td>
    <td>@DocumentNumber.Column2Name</td>
    ...etc
    <td><button class="btn btn-primary table-btn" @onclick="@(() => ShowEditDocumentNumberDialog(DocumentNumber))">Edit</button></td>
    <UpdateDocumentNumberDialog @ref="UpdateDocNumDialog" DocumentNumberForUpdating="DocumentNumber" DocumentNumberUpdatedEventCallback="@UpdateDocumentNumberDialog_OnDialogClose"></UpdateDocumentNumberDialog>
</tr>

如果事件回调只能从孙子到子子或子子到父子，我是否必须创建某种状态容器，如 Chris Sainty (https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/) 所述？或者，我是否遗漏了一些关于事件回调的信息？我试图消除子组件，但失败了，因为“编辑”按钮总是显示网格中迭代的最后一个项目。

解决方法

我能想到几个选项。一种是让孙子访问主页。这根本不需要事件：

Parent.razor

<CascadingValue Value="this">
    Body of page,somewhere in there including <Grandchild/>
</CascadingValue>

@code{
    async Task DoSomething(){
    }
}

Grandchild.razor

@code {
    [CascadingParameter]
    public Parent MainPage {get; set;} // Or whatever your main page is called

    async Task StartSomething (){
        if (MainPage is not null) MainPage.DoSomething();
    }
}
,

我在 Child 和 Grandchild 组件中包含以下参数：

 [Parameter]
    public Action MyDataHasChanged {get;set;}

进一步，在我的孙子组件中：

@code
{
  public void RefreshMySearchResultsInParent()
  {
      MyDataHasChanged?.Invoke();
  }
}

在我的子组件中：

<Grandchild @MyDataHasChanged="MyDataHasChanged"></Grandhild>

在我的父组件中：

<Child @MyDataHasChanged="RefreshMySearchResults"></Child>



 @code
    {
    
    public void RefreshMySearchResults()
    {
       //Do this...
    }

}
blazorcallbackcallbackcommunicationcommunicationcomponentscomponentseventseventsevents