Blazor跨组件状态更新：组件11触发事件后如何更新Component2状态？

针对你遇到的组件层级（page → component1 → component11）触发事件后需要更新component2状态的场景，有几种比逐层传递EventCallback更简便的方法：

1. 使用状态容器（State Container） #

这是Blazor中处理跨组件状态共享最常用的方案，核心是通过依赖注入提供一个共享的状态类，让需要交互的组件都依赖这个类同步状态：

• 首先创建实现INotifyPropertyChanged的状态类，存储共享状态并触发变化通知：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class SharedState : INotifyPropertyChanged
{
    private string _targetState;
    public string TargetState
    {
        get => _targetState;
        set
        {
            _targetState = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

• 在Program.cs中注册状态类（WebAssembly和Server均推荐用AddScoped，单例场景可改用AddSingleton）：

builder.Services.AddScoped<SharedState>();

• 在component11中注入状态类，触发事件时直接更新状态：

@inject SharedState AppState

<button @onclick="UpdateSharedState">触发component2更新</button>

@code {
    private void UpdateSharedState()
    {
        AppState.TargetState = DateTime.Now.ToString("HH:mm:ss");
    }
}

• 在component2中注入状态类，订阅状态变化并刷新自身UI：

@inject SharedState AppState
@implements IDisposable

<p>component2当前状态：@AppState.TargetState</p>

@code {
    protected override void OnInitialized()
    {
        AppState.PropertyChanged += HandleStateChange;
    }

    private void HandleStateChange(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(SharedState.TargetState))
        {
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        AppState.PropertyChanged -= HandleStateChange;
    }
}

这种方式无需逐层传递事件，所有依赖状态容器的组件都能自动感知状态变化，适合复杂跨组件交互场景。

2. 简化EventCallback传递 #

如果不想引入状态容器，可简化EventCallback的传递流程，避免每层单独处理逻辑：

• 在page层定义更新component2状态的方法，直接将对应的EventCallback传给component1：

@page "/"

<Component1 OnComponent11Triggered="RefreshComponent2" />
<Component2 DisplayValue="@_component2Data" />

@code {
    private string _component2Data;

    private void RefreshComponent2(string newData)
    {
        _component2Data = newData;
        StateHasChanged();
    }
}

• 在component1中直接接收EventCallback并透传给component11，无需额外逻辑：

<Component11 OnTriggered="@OnComponent11Triggered" />

@code {
    [Parameter]
    public EventCallback<string> OnComponent11Triggered { get; set; }
}

• 在component11中触发EventCallback即可：

<button @onclick="TriggerUpdate">触发更新</button>

@code {
    [Parameter]
    public EventCallback<string> OnTriggered { get; set; }

    private async Task TriggerUpdate()
    {
        await OnTriggered.InvokeAsync("来自component11的更新内容");
    }
}

这种方式比逐层单独定义事件更简洁，适合简单跨层级触发场景。

关于事件冒泡的说明 #

Blazor组件体系中没有自动事件冒泡机制，这是框架的设计决定——Blazor组件基于逻辑组件树而非DOM层级结构，不存在类似DOM事件的冒泡行为，也没有相关设置可以开启该功能。

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