C# 怎么在 Blazor 中进行组件间通信_C# Blazor 组件通信方法详解

来源:这里教程网 时间:2026-02-21 17:30:17 作者:

在 Blazor 中,组件间通信是构建模块化、可维护应用的关键。由于 Blazor 是单页应用框架,组件之间默认是独立的,因此需要明确的方式进行数据传递和方法调用。以下是几种常用的组件通信方式,适用于不同场景。

1. 父组件向子组件传递数据(通过参数)

这是最基础的通信方式。使用 [Parameter] 特性将数据从父组件传入子组件。

示例:

子组件 ChildComponent.razor:

@code {
    [Parameter] public string Message { get; set; } = string.Empty;
}

接收到的消息:@Message

父组件 ParentComponent.razor:

只要 Message 属性被标记为 [Parameter],父组件就可以通过属性绑定方式传值。

2. 子组件向父组件通知事件(通过回调委托)

子组件无法直接调用父组件的方法,但可以通过 EventCallback 实现反向通信。

子组件 ChildComponent.razor:

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

    private async Task SendMessage() {
        await OnMessageSent.InvokeAsync("这是来自子组件的消息");
    }
}

父组件 ParentComponent.razor:

@code {
    private void HandleMessage(string msg) {
        Console.WriteLine(msg);
    }
}

这种方式实现了子组件触发、父组件响应的事件机制。

3. 使用双向绑定(Two-way Binding)

当需要父子组件共享一个值并同步更新时,可以使用 @bind 实现双向绑定。

子组件 EditableValue.razor:

@code {
    [Parameter] public string Value { get; set; } = string.Empty;
    [Parameter] public EventCallback ValueChanged { get; set; }

    private async Task OnInput(ChangeEventArgs e) {
        if (e.Value is string input) {
            await ValueChanged.InvokeAsync(input);
        }
    }
}

父组件中使用:

redText" />
@code {
    private string sharedText = "初始值";
}

Blazor 会自动识别 Value 和 ValueChanged 配对,实现双向同步。

4. 跨层级或非父子组件通信(使用依赖注入服务)

当组件层级较深或没有直接关系时,推荐使用一个共享的服务来管理状态和通信。

定义一个状态服务:

public class MessageService {
    public string CurrentMessage { get; private set; } = string.Empty;

    public event Action? OnMessageChanged;

    public void UpdateMessage(string message) {
        CurrentMessage = message;
        OnMessageChanged?.Invoke();
    }
}

在 Program.cs 中注册服务:

builder.Services.AddSingleton();

任意组件中注入并使用:

@inject MessageService MessageService

@code {
    protected override void OnInitialized() {
        MessageService.OnMessageChanged += StateHasChanged;
    }

    private void SendMessage() {
        MessageService.UpdateMessage("新消息");
    }

    public void Dispose() {
        MessageService.OnMessageChanged -= StateHasChanged;
    }
}

这种模式类似于“发布-订阅”,适合全局状态管理,如用户登录状态、主题切换等。

基本上就这些。根据组件关系选择合适的方式:父子用 Parameter 和 EventCallback,深层或跨组件用服务注入。不复杂但容易忽略细节,比如事件注销和绑定命名规则。掌握这些,Blazor 组件通信就很清晰了。

相关推荐