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?. Of course, you can use also an ObservableCollection。也许你可以避免事件，只需添加到列表并调用 StateHasChanged 就足够了。

请记住，您可以通过参数或 cascade parameter.

共享列表

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

其他选项。

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

Answer 2

您应该已经发布了包含您的问题的最小回购协议，以便我们可以清楚地看到您面临的问题。

但是，一般来说，有几种方法可以做到这一点。在我在 Blazor 部分的一个回答中，我描述了三种启用这种情况的方法。

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

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

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

查看我的回答 and 。

希望这对您有所帮助...

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

Blazor (Server-side) communicate between sibling components

blazor

blazor-server-side

场景

选项 1：委托

选项 2：共享列表

其他选项。