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

Question

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

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

Answer 1

设想

让我们假设:

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

选项 1: 代表

使用 代表 ，您可以捕获 GRID 的引用组件并调用 GRID来自 FORM 的方法通过代表。试试 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>

其他选项。

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