如何实现Blazor父子组件间参数的单向绑定？

因为你传递的是引用类型对象，直接传递会导致父子组件共享同一个实例，子组件修改时会直接影响父组件的原对象。要实现单向绑定，核心思路是让子组件操作对象副本，而非原实例，只有用户确认修改时才同步回父组件。

方案一：父组件传递对象副本给子组件 #

1. 生成原对象的深拷贝
   打开弹窗前，为原对象创建独立副本，避免子组件修改影响原数据。可通过两种方式实现：

   // 父组件代码
   private Domain.Session.Session _sessionCopy;
   private Domain.Session.Session _originalSession; // 父组件持有的原对象
   
   // 打开弹窗时生成副本
   private void OpenEditModal()
   {
       // 方式1：序列化反序列化实现深拷贝（需确保Session类标记[Serializable]）
       var json = JsonSerializer.Serialize(_originalSession);
       _sessionCopy = JsonSerializer.Deserialize<Domain.Session.Session>(json);
   
       // 方式2：手动复制属性（性能更优，适合复杂对象）
       // _sessionCopy = new Domain.Session.Session
       // {
       //     Id = _originalSession.Id,
       //     Name = _originalSession.Name,
       //     // 逐个复制所有需要修改的属性
       // };
       IsModalOpen = true;
   }
   

2. 子组件绑定副本
   父组件调用子组件时，传递副本而非原对象：

   <!-- 父组件中渲染子组件 -->
   <SessionEditModal Item="_sessionCopy" OnConfirm="HandleConfirm" OnCancel="HandleCancel" />
   

3. 确认/取消时的处理
   用户确认修改后，将副本的属性同步回原对象；取消则直接丢弃副本：

   private void HandleConfirm(Domain.Session.Session updatedItem)
   {
       // 同步副本数据到原对象
       _originalSession.Name = updatedItem.Name;
       _originalSession.Description = updatedItem.Description;
       // 同步其他需要更新的属性
       IsModalOpen = false;
   }
   
   private void HandleCancel()
   {
       IsModalOpen = false;
       // 直接关闭弹窗，副本自动销毁，原对象无变化
   }
   

方案二：子组件内部创建参数副本 #

如果不想在父组件处理拷贝逻辑，可以让子组件自己创建副本：

1. 子组件内初始化本地副本
   在子组件接收到父组件传递的参数后，立即创建本地副本，后续所有修改都基于这个副本：

   // 子组件代码
   [Parameter] public Domain.Session.Session Item { get; set; }
   private Domain.Session.Session _localItem; // 子组件本地副本
   
   protected override void OnParametersSet()
   {
       base.OnParametersSet();
       // 每次参数更新时重新生成副本
       var json = JsonSerializer.Serialize(Item);
       _localItem = JsonSerializer.Deserialize<Domain.Session.Session>(json);
       // 或手动复制属性
   }
   

2. UI绑定本地副本
   子组件的输入控件绑定到本地副本，而非直接绑定父组件传递的Item：

   <!-- 子组件内的输入示例 -->
   <InputText @bind-Value="_localItem.Name" />
   <InputTextArea @bind-Value="_localItem.Description" />
   

3. 回调传递修改后的副本
   确认时将本地副本通过回调传给父组件，取消则直接关闭弹窗：

   [Parameter] public EventCallback<Domain.Session.Session> OnConfirm { get; set; }
   [Parameter] public EventCallback OnCancel { get; set; }
   
   private async Task ConfirmChanges()
   {
       await OnConfirm.InvokeAsync(_localItem);
   }
   
   private async Task CancelChanges()
   {
       await OnCancel.InvokeAsync();
   }
   

注意事项 #

• 如果Session包含嵌套的引用类型属性，必须使用深拷贝，浅拷贝只会复制顶层引用，嵌套对象仍会共享实例，导致原对象被修改。
• 手动复制属性的方式比序列化反序列化性能更高，对于大型对象建议优先采用手动复制。

内容的提问来源于stack exchange，提问作者americanslon