Blazor 中父子组件间参数传递失效的排查与修复指南

本文详解 blazor 应用中因参数绑定方式错误与事件回调缺失，导致子组件（如笔记卡片）无法正确渲染父组件传入的标题和描述内容的问题，并提供可落地的修复方案。

在 Blazor 应用中构建动态笔记列表时，一个常见却隐蔽的陷阱是：表单提交后新笔记对象被成功添加到集合中，但渲染出的 组件始终显示空标题与空描述（仅按钮可见）。根本原因并非 ui 框架（如 Syncfusion）或逻辑结构本身，而是组件间数据流断裂——具体表现为两个关键缺陷：

1. 表单组件未将用户输入值回传给父组件

FormCrearNotas 组件内部通过 @bind-value=”@Titulo” 绑定输入框，但该绑定仅作用于组件自身字段（public String Titulo { get; set; }），不会自动同步到父组件 ListaNotas 的 NuevoTitulo 属性。由于 ListaNotas 中的 NuevoTitulo 和 NuevaDescripcion 始终为 NULL 或空字符串，AgregarNota(NuevoTitulo, NuevaDescripcion) 实际传入的是无效值。

✅ 修复方式：使用双向绑定事件回调（推荐）
在 FormCrearNotas.razor.cs 中定义自定义事件回调，显式通知父组件获取当前表单值：

// FormCrearNotas.razor.cs [Parameter] public EventCallback<string> OnTitleChanged { get; set; } [Parameter] public EventCallback<string> OnDescriptionChanged { get; set; }  private async Task OnTitleinputChanged(ChangeEventArgs e) {     Titulo = e.Value?.ToString();     await OnTitleChanged.InvokeAsync(Titulo); }  private async Task OnDescriptionInputChanged(ChangeEventArgs e) {     Descripcion = e.Value?.ToString();     await OnDescriptionChanged.InvokeAsync(Descripcion); }

对应更新 .razor 文件中的输入框（禁用 bind-value，改用 @onchange）：

<input class="..." @onchange="OnTitleInputChanged" value="@Titulo" /> <input class="..." @onchange="OnDescriptionInputChanged" value="@Descripcion" />

⚠️ 注意：@bind-value 是单向绑定（仅设置值），而 @bind（如 ）才是双向绑定 shorthand；但在此场景下，因需跨组件通信，显式 @onchange + EventCallback 更可控、更清晰。

2. 父组件未订阅表单变更并更新本地状态

在 ListaNotas.razor 中，需监听表单输入变化，实时更新 NuevoTitulo/NuevaDescripcion：

<FormCrearNotas      @ref="formRef"     CancelarNota="@(() => MostrarFormulario = false)"      CrearNota="@AgregarNota"     OnTitleChanged="@((value) => NuevoTitulo = value)"     OnDescriptionChanged="@((value) => NuevaDescripcion = value)" />

同时确保 AgregarNota 方法调用前状态已刷新（Blazor 会自动触发重渲染）：

public void AgregarNota() {     if (!string.IsNullOrWhiteSpace(NuevoTitulo) && !string.IsNullOrWhiteSpace(NuevaDescripcion))     {         notas.Add(new Nota { Titulo = NuevoTitulo, Descripcion = NuevaDescripcion });         NuevoTitulo = string.Empty;         NuevaDescripcion = string.Empty;         MostrarFormulario = false;     } }

3. 优化 的参数接收逻辑（消除冗余）

当前 BlocNota 同时声明了 [Parameter] public Nota Nota { get; set; } 和 [Parameter] public string Titulo { get; set; }，但 ListNotes 中实际只传了 Titulo 和 Descripcion 字符串，未传 Nota 对象 —— 导致 Nota 为 null，而 Titulo/Descripcion 又因上述问题为空。应统一数据源：

✅ 推荐修改 BlocNota.razor.cs，仅依赖 Nota 参数（更符合单一数据源原则）：

[Parameter] public Nota Nota { get; set; } // 移除 Titulo/Descripcion 参数  // 视图中直接使用 Nota.Titulo / Nota.Descripcion <h3 class="text-white font-bold rounded-lg">@Nota?.Titulo</h3> <p class="text-white rounded-lg">@Nota?.Descripcion</p>

并在 ListaNotas.razor 中正确传递 Nota 实例：

@foreach (var nota in notas) {     <BlocNota Nota="@nota" BorrarNota="@(() => EliminarNota(nota))" /> }

总结：Blazor 组件通信黄金法则

• ✅ 表单子组件不持有业务状态：输入值应通过 EventCallback 主动“推”给父组件，而非等待父组件“拉”。
• ✅ 父组件统一管理状态：所有待提交数据（NuevoTitulo 等）必须由父组件声明并维护，子组件仅负责采集与转发。
• ✅ 避免参数重复定义：若 BlocNota 已接收完整 Nota 对象，就无需再拆分为独立字符串参数，减少不一致风险。
• ✅ 调试技巧：在 @foreach 循环内添加

  @nota.Titulo | @nota.Descripcion

  直接验证数据是否存在，快速定位是数据未生成还是渲染未生效。

遵循以上修正，笔记列表即可正确显示标题与描述，且具备良好的可维护性与扩展性。