如何解决Blazor父子组件参数传递失败的问题？

本文共计1000个文字，预计阅读时间需要4分钟。

原文：

在 Blazor 应用中构建动态笔记列表时，一个常见却隐蔽的陷阱是：表单提交后新笔记对象被成功添加到集合中，但渲染出的 <BlocNota> 组件始终显示空标题与空描述（仅按钮可见）。根本原因并非 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" />

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> 的参数接收逻辑（消除冗余）

当前 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<T> 主动“推”给父组件，而非等待父组件“拉”。
• ✅ 父组件统一管理状态：所有待提交数据（NuevoTitulo 等）必须由父组件声明并维护，子组件仅负责采集与转发。
• ✅ 避免参数重复定义：若 BlocNota 已接收完整 Nota 对象，就无需再拆分为独立字符串参数，减少不一致风险。
• ✅ 调试技巧：在 @foreach 循环内添加 <p>@nota.Titulo | @nota.Descripcion</p> 直接验证数据是否存在，快速定位是数据未生成还是渲染未生效。

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