Blazor 怎么实现父子组件通信

Blazor父子组件通信主要靠Parameter、EventCallback和CascadingParameter：父传子用[Parameter]接收属性并支持@bind双向绑定；子传父通过EventCallback回调；跨多层用CascadingParameter级联值；服务共享仅作特殊场景兜底。

Blazor 中父子组件通信主要靠参数传递（@bind、EventCallback）和 CascadingParameter，不需要状态管理库也能高效协作。

父传子：用 [Parameter] 接收属性

子组件定义 public 属性并加 [Parameter] 特性，父组件像写 HTML 属性一样传值：

• 子组件（Child.razor）中写：[Parameter] public string Title { get; set; } = "默认标题";
• 父组件中使用：，其中 @parentTitle 是父组件的字段或属性
• 支持双向绑定：子组件加 [Parameter] public string Value { get; set; } 和 [Parameter] public EventCallback ValueChanged { get; set; }，父组件用 @bind-Value="model.Text" 即可同步更新

子传父：用 EventCallback 触发回调

这是最常用、最推荐的方式，本质是子组件“通知”父组件发生了什么：

• 子组件声明：[Parameter] public EventCallback OnSubmit { get; set; }
• 在子组件内部（如按钮点击）调用：await OnSubmit.InvokeAsync("用户输入内容");
• 父组件接收：，并在 @code 中定义 void HandleChildSubmit(string msg) { ... }
• 注意：EventCallback 支持泛型，可传任意类型（EventCallback、EventCallback 等）

跨多层传递：用 CascadingParameter

适合主题、语言、认证上下文等需要贯穿多层组件的场景：

BlessAI

Bless AI 提供五个独特的功能：每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

下载

• 顶层组件（如 MainLayout.razor）包裹内容：@Body
• 任意后代组件声明：[CascadingParameter] public MainLayout Layout { get; set; }
• 也可级联简单值：...，后代用 [CascadingParameter] public User currentUser { get; set; }
• 注意：级联值变化时，所有监听它的组件会自动重新渲染（需确保值是引用类型或重写 ShouldRender 控制）

不推荐但可行：通过服务共享状态

适用于复杂交互或多个非父子关系组件需协同的场景，但要小心生命周期和线程安全：

• 注册一个 scoped 服务（如 SharedStateService），含 public event Action OnStateChanged;
• 组件注入该服务，修改状态后触发事件，其他组件订阅并刷新 UI
• Blazor Server 下注意 SignalR 连接上下文；WebAssembly 下无此限制，但仍建议优先用前三种方式
• 避免在服务里直接操作 DOM 或依赖页面生命周期，保持纯逻辑

基本上就这些。多数场景用 [Parameter] + EventCallback 就够了，清晰、可控、易测试。CascadingParameter 是优雅的补充，服务共享则留作特殊需求兜底。