Blazor 组件：如何从孙子到孩子到父母或孙子到父母进行通信

Question

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

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

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

更多细节...

当主页（“父”页面）迭代返回的项目列表时，它会插入一个<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/) 的描述创建某种 状态容器？或者，我是否遗漏了有关事件回调的某些内容？我试图消除子组件，但失败了，因为编辑按钮总是显示网格中迭代的最后一项。

Answer 1

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

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();
    }
}

Answer 2

我在 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...
    }

}