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

Posted 2023-03-27

【中文标题】Blazor（服务器端）在同级组件之间进行通信

【英文标题】：Blazor (Server-side) communicate between sibling components

【发布时间】：2020-01-18 11:44:12

【问题描述】：

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

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

【参考方案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

【讨论】：

我最终使用了最适合我的应用程序的委托选项。

@fred，很高兴听到。

【参考方案2】：

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

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

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

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

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

查看我的回答 here 和 here。

希望对你有帮助……

【讨论】：

谢谢。这可能也值得设置为正确答案，但我最终使用了 Dani Herrera 建议的委托方法。我实际上已经找到了 FlightFinder。可能来自您的 *** 帖子。我想我当时强调要经历并理解它，但我现在肯定会这样做。

@Fred，阅读 cmets tothis question，它阐明了使用委托（例如 EventCallback）和 App State 模式之间的区别：***.com/questions/58024328/…