Blazor组件之间使用EventCallback进行通信

本文转载自微信公众号「技术译站」，作者技术译民。转载本文请联系技术译站公众号。

创新互联主要从事做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务二道江,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

Blazor 应用程序是相互交互的多个 Blazor 组件的集合，我们可以在其他父组件中使用子组件。在实际的应用程序中，将数据或事件信息从一个组件传递到另一组件是一种十分常见的场景。您可能会有一个页面，其中一个组件中发生的用户操作需要更新其他组件中的某些 UI。通常使用 EventCallback 委托来处理这种类型的通信。在本教程中，我将介绍如何使用 EventCallback 在父组件和子组件之间进行通信。

下面是使用 EventCallback 从子组件到父组件进行通信所涉及的通用步骤。

在子组件中声明一个 EventCallback 或 EventCallback 委托
在父组件中附加一个到子组件的 EventCallback 或 EventCallback 的回调方法
当子组件想要与父组件通信时，可以使用以下方法之一调用父组件的回调方法。

InvokeAsync(Object) – 如果使用的是 EventCallback
InvokeAsync(T) – 如果使用的是 EventCallback

为了理解上述步骤，让我们创建一个简单的待办事项列表(To Do List)示例。首先，在 Data 文件夹中创建以下 ToDo.cs 类。这是一个简单类，用于存储每个待办事项的 Title 和 Minutes 属性。Minutes 属性指定完成特定待办事项所需的时间。

ToDo.cs

 
 
 
 
  
  
  
  public class ToDo
  
  
  
  {
  
  
  
      public string Title { get; set; }
  
  
  
      public int Minutes { get; set; }
  
  
  
  }

在项目中添加以下 ToDoList.razor 组件，并在其中编写以下代码：

ToDoList.razor

 
 
 
 
  
  
  
  @page "/todos"
  
  
  
  @using BlazorEventHandlingDemo.Data
  
  
  
   
  
  
  
  
  
  
  
      To Do List

Total Minutes: @TotalMinutes

protected override void OnInitialized()
{
ToDos = new List()
{
new ToDo() { Title = "Analysis", Minutes = 40 },
new ToDo() { Title = "Design", Minutes = 30 },
new ToDo() { Title = "Implementation", Minutes = 75 },
new ToDo() { Title = "Testing", Minutes = 40 }
};
UpdateTotalMinutes();
}

@using BlazorEventHandlingDemo.Data
@Item.Title
@Item.Minutes
+ Add Minutes
@code {
[Parameter]
public ToDo Item { get; set; }
}

@using BlazorEventHandlingDemo.Data
@Item.Title
@Item.Minutes
+ Add Minutes
@code {
[Parameter]
public ToDo Item { get; set; }
[Parameter]
public EventCallback OnMinutesAdded { get; set; }
public async Task AddMinute(MouseEventArgs e)
{
Item.Minutes += 1;
await OnMinutesAdded.InvokeAsync(e);
}
}

@page "/todos"
@using BlazorEventHandlingDemo.Data
To Do List
Total Minutes: @TotalCount
Title
Minutes
@foreach (var todo in ToDos)
{
}
@code {
public List ToDos { get; set; }
public int TotalCount { get; set; }
protected override void OnInitialized()
{
ToDos = new List()
{
new ToDo() { Title = "Analysis", Minutes = 40 },
new ToDo() { Title = "Design", Minutes = 30 },
new ToDo() { Title = "Implementation", Minutes = 75 },
new ToDo() { Title = "Testing", Minutes = 40 }
};
UpdateTotalMinutes();
}
public void UpdateTotalMinutes()
{
TotalCount = ToDos.Sum(x => x.Minutes);
}
public void OnMinutesAddedHandler(MouseEventArgs e)
{
UpdateTotalMinutes();
}
}