Blazor Server Side如何将对象实例传递给嵌套组件？

核心逻辑：Person 是引用类型，只要正确传递实例，子组件修改其属性会自动同步到父组件的原始实例，无需额外事件通知（值类型才需要双向绑定或回调）。以下是两种可行实现方案：

方案一：逐层通过 [Parameter] 传递 #

1. 定义 Person 类 #

// Person.cs
public class Person
{
    public string Name { get; set; } = string.Empty;
    public int Age { get; set; }
}

2. 修改父页面 myPage #

myPage.razor.cs：

public partial class MyPage
{
    // 父组件维护的Person实例
    private Person CurrentPerson { get; set; } = new Person { Name = "张三", Age = 30 };
}

myPage.razor：

@page "/myPage"
<div class="row">
    <div class="col">
        <!-- 将父组件的实例传递给ComponentA -->
        <ComponentA Person="CurrentPerson" />
    </div>
    <div class="col mt-3">
        <!-- 父组件实时展示最新值，验证同步效果 -->
        <p>父组件显示：姓名@CurrentPerson.Name，年龄@CurrentPerson.Age</p>
    </div>
</div>

3. 修改 ComponentA #

<div class="row">
    <div class="col">
        <!-- 将接收的实例传递给ComponentB -->
        <ComponentB Person="Person" />
    </div>
    <div class="col mt-2">
        <input type="text" @bind="Person.Name" placeholder="修改姓名" />
        <input type="number" @bind="Person.Age" placeholder="修改年龄" />
    </div>
</div>

@code {
    // 接收父组件传递的参数
    [Parameter]
    public Person Person { get; set; } = default!; // 确保不为null，可添加null检查
}

4. 修改 ComponentB #

<div class="row mt-3">
    <div class="col">
        <h5>ComponentB 修改区</h5>
        <input type="text" @bind="Person.Name" class="form-control mb-2" />
        <input type="number" @bind="Person.Age" class="form-control" />
    </div>
</div>

@code {
    [Parameter]
    public Person Person { get; set; } = default!;
}

方案二：使用 [CascadingParameter] 直接传递（无需逐层传递） #

适合多层嵌套组件的场景，父组件一次传递，所有子组件可直接接收：

1. 修改父页面 myPage #

@page "/myPage"
<!-- 用CascadingValue包裹子组件，级联传递Person实例 -->
<CascadingValue Value="CurrentPerson">
    <div class="row">
        <div class="col">
            <ComponentA />
        </div>
        <div class="col mt-3">
            <p>父组件显示：姓名@CurrentPerson.Name，年龄@CurrentPerson.Age</p>
        </div>
    </div>
</CascadingValue>

@code {
    private Person CurrentPerson { get; set; } = new Person { Name = "张三", Age = 30 };
}

2. 修改 ComponentA #

<div class="row">
    <div class="col">
        <ComponentB />
    </div>
    <div class="col mt-2">
        <input type="text" @bind="Person.Name" placeholder="修改姓名" />
        <input type="number" @bind="Person.Age" placeholder="修改年龄" />
    </div>
</div>

@code {
    // 直接接收级联参数
    [CascadingParameter]
    public Person Person { get; set; } = default!;
}

3. 修改 ComponentB #

<div class="row mt-3">
    <div class="col">
        <h5>ComponentB 修改区</h5>
        <input type="text" @bind="Person.Name" class="form-control mb-2" />
        <input type="number" @bind="Person.Age" class="form-control" />
    </div>
</div>

@code {
    [CascadingParameter]
    public Person Person { get; set; } = default!;
}

关键注意事项 #

• 禁止在子组件中重新实例化 Person（如 Person = new Person();），否则会断开与父组件实例的引用关联
• 如果出现参数为null的情况，检查：
  • 父组件是否正确传递参数（如 <ComponentA Person="CurrentPerson" /> 拼写是否正确）
  • 子组件的参数名称与父组件传递的名称是否完全一致（大小写敏感）
  • 可在子组件 OnInitialized 生命周期中添加null检查，避免空引用异常

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