Blazor WASM：从Index组件更新MainLayout级联参数后UI不更新

你当前的问题核心在于值类型的传递机制：decimal是值类型，级联参数传递给Index组件的是total的副本。你在Index里修改的只是这个本地副本，MainLayout中的原始total根本没发生变化，所以MainLayout的UI不会更新；而你调用的StateHasChanged()也只能刷新Index组件自身的UI，影响不到父级的MainLayout。

下面提供两种可行的解决方案：

方案一：用引用类型包装值 #

通过创建一个引用类型的类来包装total值，让级联参数传递这个类的实例。这样父子组件操作的是同一个对象，修改属性后父组件的UI会自动感知并更新。

1. 创建一个ViewModel类（可放在项目的Models目录下）：

public class TotalViewModel
{
    public decimal Total { get; set; }
}

2. 修改MainLayout代码：

<div class="sidebar">
    <NavMenu />
</div>

<main>
    <CascadingValue Value="@totalViewModel" Name="TotalPara">
        <div class="top-row px-4">
            <h6>Total sum: @totalViewModel.Total</h6>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </CascadingValue>
</main>

@code{
    private TotalViewModel totalViewModel = new();
}

3. 修改Index组件代码：

Click the button to update total value <br/>
<button class="btn btn-primary" @onclick="UpdateValue">Update Total</button>

@code{
    [CascadingParameter(Name = "TotalPara")] TotalViewModel totalViewModel { get; set; }

    private void UpdateValue()
    {
        totalViewModel.Total += 10;
        // 无需手动调用StateHasChanged，引用类型属性变更后父组件会自动更新UI
    }
}

方案二：使用EventCallback（更符合Blazor组件通信规范） #

这种方式让子组件通过事件通知父组件更新数据，由父组件自行修改值并触发UI更新，逻辑更清晰可控。

1. 修改MainLayout代码：

<div class="sidebar">
    <NavMenu />
</div>

<main>
    <div class="top-row px-4">
        <h6>Total sum: @total</h6>
    </div>

    <article class="content px-4">
        <Index OnUpdateTotal="UpdateTotal" />
    </article>
</main>

@code{
    private decimal total = 0;

    private void UpdateTotal()
    {
        total += 10;
        // Blazor会自动处理UI刷新，无需手动调用StateHasChanged
    }
}

2. 修改Index组件代码：

Click the button to update total value <br/>
<button class="btn btn-primary" @onclick="TriggerUpdate">Update Total</button>

@code{
    [Parameter] public EventCallback OnUpdateTotal { get; set; }

    private async Task TriggerUpdate()
    {
        await OnUpdateTotal.InvokeAsync();
    }
}

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