跳转到主内容
极星编程网:以代码为星,赴技术山海!

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 EventCallbackOnSubmit { get; set; } 在子组件内部(如按钮点击)调用: await OnSubmit.InvokeAsync("用户输入内容"); 父组件接收: ,并在
@code
中定义
void HandleChildSubmit(string msg) { ... }
注意:
EventCallback
支持泛型,可传任意类型(
EventCallback
、
EventCallback
等) 跨多层传递:用 Cas cad ingParameter 适合主题、语言、认证上下文等需要贯穿多层组件的场景: 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 顶层组件(如 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 是优雅的补充,服务共享则留作特殊需求兜底。

相关文章