Blazor怎么进行组件间通信 Blazor组件参数传递方法

来源:这里教程网 时间:2026-02-21 17:33:18 作者:

Blazor 组件间通信核心靠 参数传递 + 状态管理 + 事件回调,不依赖全局变量或手动订阅,重点是理清父子关系和数据流向。

父子组件用 [Parameter] 和 EventCallback 传值

这是最常用、最直观的方式。父组件通过属性([Parameter])向子组件传数据,子组件用 EventCallback 触发事件通知父组件。

子组件定义可接收的参数:
[Parameter] public string Title { get; set; }
子组件定义回调委托:
[Parameter] public EventCallback<string> OnClick { get; set; }</string>
父组件调用时绑定:
<childcomponent title="你好" onclick="HandleChildClick"></childcomponent>
子组件内触发:
await OnClick.InvokeAsync("按钮被点了");

跨层级或无直接关系用 Cas#%#$#%@%@%$#%$#%#%#$%@_b5fde512c76571c8afd6a6089eaaf42aingParameter

适合“祖-孙”或深层嵌套场景,比如主题、用户上下文、导航服务等需要贯穿多层的共享状态。

在根组件(如
App.razor
或布局组件)包裹
CascadingValue
<cascadingvalue value="currentUser"><router ...></router></cascadingvalue>
任意后代组件用
[CascadingParameter]
接收:
[CascadingParameter] public User CurrentUser { get; set; }
注意:值变更不会自动刷新后代组件,需配合
StateHasChanged()
或使用
NotifyPropertyChanged
的对象(如
ObservableObject

松耦合通信用 .NET 事件或 StateContainer(推荐)

当组件没有明确父子关系(比如两个并列的页面组件),避免硬引用,用状态容器统一管理数据流。

新建一个
StateContainer.cs
类,继承
ComponentBase
或单纯用
INotifyPropertyChanged
把共享状态(如搜索关键词、选中项)放里面,并暴露
public event Action OnStateChanged;
组件注入该服务(
@inject StateContainer State
),读取状态 + 订阅事件
状态变更时调用
OnStateChanged?.Invoke();
,再在组件里重写
OnInitialized
或监听事件后调用
StateHasChanged()

路由参数和查询字符串用 NavigationManager

适用于页面级跳转通信,比如从列表页点进详情页带 ID。

路由定义:
@page "/product/{Id:int}"
,组件加
[Parameter] public int Id { get; set; }
获取查询参数:
NavigationManager.ToBaseRelativePath(NavigationManager.Uri)
配合
Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery
跳转时传参:
NavigationManager.NavigateTo($"/product/123?tab=specs")

基本上就这些。别硬套 MVVM 模式,Blazor 的响应式更新机制让参数驱动天然高效。关键是分清谁该持有状态、谁只负责展示或操作——状态上移,事件下传,跨层靠 Cascading,解耦靠 StateContainer。

相关推荐