Blazor（服务器端）在同级组件之间进行通信

Question

我有三个组件。 组件一包含组件二和三。 组件二是一个列表。 组件三用于向数据库添加项目。

当我将一个项目保存到数据库时，我想更新组件二中的列表。 我该怎么做？

Answer 1

场景

假设：

<CRUD>
    <GRID/>
    <FORM/>
</CRUD>

选项 1：委托

使用委托，您可以捕获GRID 组件的引用，并通过委托从FORM 调用GRID 方法。试试delegate sample at blazorfiddle。

简化：

开启CRUD:

<GRID @ref="mygrid" />
<FORM mydelegate="@( (s) => mygrid.setData(s) )" />

@code
{
    protected GRID mygrid;
}

在GRID:

<h1>@data</h1>

@code
{
    string data;

    public void setData(string value)
    {
        data = value;
        StateHasChanged();
    }
}

开启FORM：

<input @bind-value=@somedata />
<button @onclick="@( () => mydelegate(somedata ?? "hi") )">press</button>

@code
{
    [Parameter] public Action<string> mydelegate {set; get;}
    string somedata;
}

选项 2：分享列表

只需在组件之间共享您的列表。您还可以订阅GRID 到add 事件列表。更多信息How to handle add to list event?。当然，您也可以使用ObservableCollection。也许您可以避免事件，只需添加到列表并致电StateHasChanged 就足够了。

请记住，您可以通过参数或cascade parameter 共享列表。

<CRUD>
    <GRID data=@mylist />
    <FORM data=@mylist />
</CRUD>

其他选项。

您是否还有更多选择，例如通过依赖注入、事件回调等使用单例。我建议你通过@Chris Sainty阅读3 Ways to Communicate Between Components in Blazor

Answer 2

您应该针对您的问题发布一个最小的 repo，以便我们可以清楚地看到您面临的问题。

但是，一般来说，有几种方法可以做到这一点。在我在 Blazor 部分的答案之一中，我描述了如何启用这种场景的三种方法。

在这个答案中，我建议您使用 App State Pattern，您可以从中管理组件的状态、执行与组件中的数据相关的 CRUD 操作、刷新组件等。

史蒂夫·安德森（Steve Anderson）创建的一个使用应用状态模式的优秀示例是FlightFinder。此示例（客户端项目）定义了一个名为 AppState 的服务，该服务被注入到许多组件中，并为它们提供各种功能。请检查这个类和所涉及的组件，以及它们如何相互通信，并应用你将在你的应用程序中学到的东西。不要犹豫，问任何问题。

注意：如果您不熟悉此示例，请彻底了解它，因为这是学习 Blazor 的绝佳方式。

查看我的回答 here 和 here。

希望对你有帮助……