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

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

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

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

例如子组件 Child.razor 中：

父组件中调用：

若需双向绑定（比如子组件修改后同步回父组件），可用 @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 推荐的解耦方式。

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

• 子组件定义回调参数：
  [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] 逐层透传很繁琐。这时可结合 CascadingParameter 和 CascadingValue。

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

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

# ai  # 的是  # 放在  # 这是  # 多个  # 有个  # 进阶  # 并在  # 首次  # 绑定  # public  # http  # String  # int  # c#  # 异步  # 事件  # 回调  # cad  # count  # 访问器  # 重绘 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】