Blazor 组件：如何从 grandchild 到 child 到 parent 或 grandchild 到 parent 进行通信

Question

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

Parent：带有搜索结果网格的主页（页面）；为每个项目嵌入一个 DisplayDocumentNumber 组件
Child：DisplayDocumentNumber 组件，它有自己的 (child) UpdateDocumentNumber 组件
Grandchild：UpdateDocumentNumber 组件 - bootstrap 对话框

我的理解是我可以使用事件回调来做到这一点；然而，虽然我可以 raise/invoke 从 grandchild 到 child 的事件回调，但我似乎无法从 child.[=21 通知 parent =]

更多详细信息...

当主页（“parent”页面）遍历返回的项目列表时，它会插入一个 <DisplayDocumentNumber> 组件（“child”），然后 <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; }。这从 grandchild 到 child.

正常工作

在 DisplayDocumentNumber.razor 组件内是为搜索结果中的每个文档编号呈现的行，包括具有 DOM 事件以显示 bootstrap 对话框的编辑按钮.最后，如上所述，还有 <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>

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

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

此外，在我的 Grandchild 组件中：

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

在我的子组件中：

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

在我的父组件中：

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



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

}

Blazor 组件：如何从 grandchild 到 child 到 parent 或 grandchild 到 parent 进行通信

Blazor components: How to communicate from grandchild to child to parent or grandchild to parent

events

components

communication

callback

blazor