Blazor 父子组件数据传递和事件回调方法

父子组件通信核心为三机制:①[Parameter]单向传值;②@bind+EventCallback实现双向绑定;③EventCallback通知父组件;参数变更需在OnParametersSetAsync中响应,跨层级用CascadingParameter。

blazor 父子组件数据传递和事件回调方法

父子组件数据传递:使用 [Parameter] 和 @bind

父组件向子组件传值,最常用的是 [Parameter] 特性。子组件定义一个 public 属性并标记为 [Parameter],父组件在引用子组件时通过属性名绑定值即可。

例如子组件 Child.razor 中:

[Parameter] public string Title { get; set; } = “默认标题”;
[Parameter] public int Count { get; set; }

父组件中调用:

若需双向绑定(比如子组件修改后同步回父组件),可用 @bind 语法。此时子组件需同时提供参数和对应的 Changed 事件回调(类型为 EventCallback)。

  • 子组件声明:
    [Parameter] public string Value { get; set; }
    [Parameter] public EventCallback ValueChanged { get; set; }
  • 在子组件内触发更新:
    await ValueChanged.InvokeAsync(newValue);
  • 父组件使用:
    (Blazor 自动解析为 Value + ValueChanged 绑定)

子组件向父组件通信:通过 EventCallback 回调

子组件不能直接修改父组件状态,但可通过 EventCallback 主动“通知”父组件发生了什么。这是 Blazor 推荐的解耦方式。

Figma Slides

Figma Slides

Figma Slides 是 Figma 发布的PPT制作和演示文稿生成工具,可以帮助创建、设计、定制和分享演示文稿

下载

典型场景:子组件有个按钮,点击后希望父组件刷新列表或显示提示。

  • 子组件定义回调参数:
    [Parameter] public EventCallback OnClick { get; set; }
    // 或带参:
    [Parameter] public EventCallback OnItemSelect { get; set; }
  • 在子组件事件中触发:
    await OnClick.InvokeAsync();
    // 或带参调用:
    await OnItemSelect.InvokeAsync(“item1”);
  • 父组件接收并处理:


    并在 @code 块中定义对应方法。

避免常见陷阱:参数更新与生命周期配合

Parameter 属性变更不会自动触发组件重绘逻辑,除非你显式响应。Blazor 在参数更新后会调用 OnParametersSet(或异步版 OnParametersSetAsync),这是执行副作用(如重新加载数据)的合适时机。

  • 不要在 Set 访问器里做异步操作(C# 不支持 async setter)
  • 需要根据参数变化发起 HTTP 请求?放在 OnParametersSetAsync
  • 注意:首次渲染和每次参数变更都会触发该方法,必要时加条件判断(如对比新旧值)

进阶技巧:使用 CascadingParameter 实现跨层级传递

当多个嵌套层级(如父→子→孙)都需要访问同一数据或服务时,重复通过 [Parameter] 逐层透传很繁琐。这时可结合 CascadingParameterCascadingValue

  • 父组件包裹内容区域:


  • 子/孙组件声明接收:
    [CascadingParameter] public string ThemeColor { get; set; }
  • 适合传递主题、用户上下文、全局配置等不频繁变更的数据

基本上就这些。核心就三点:Parameter 传入、EventCallback 传出、CascadingParameter 跨层共享——不复杂但容易忽略生命周期钩子的使用时机。

https://www.php.cn/faq/1976613.html

发表回复

Your email address will not be published. Required fields are marked *