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

Question

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

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

Answer 1

设想

让我们假设：

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

选项 1：委托

使用委托，您可以捕获GRID组件的引用并通过委托调用GRID方法FORM。在 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：共享列表

只需在组件之间共享您的列表。您也CAL订阅GRID到add事件列表。更多信息如何处理添加到列表事件？. 当然，您也可以使用ObservableCollection。也许您可以避免事件，只需添加到列表并调用StateHasChanged就足够了。

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

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

其他选项。

您是否还有更多选择，例如通过依赖注入、事件回调、...使用单例。我建议您阅读@Chris Sainty撰写的Blazor 中组件之间通信的 3 种方式