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

父组件通过Parameter传值，子组件用EventCallback回调，双向绑定用@bind，跨组件通信依赖服务注入。

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

1. 父组件向子组件传递数据（通过参数）

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

示例：

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

<div>接收到的消息：@Message</div>

<ChildComponent Message="你好，子组件！" />

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

2. 子组件向父组件通知事件（通过回调委托）

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

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

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

<button @onclick="SendMessage">发送消息给父组件</button>

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

<ChildComponent OnMessageSent="HandleMessage" />

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

通义万相

通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

3. 使用双向绑定（Two-way Binding）

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

@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);
        }
    }
}

<input value="@Value" @oninput="OnInput" />

<EditableValue @bind-Value="sharedText" />
@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();
    }
}

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 组件通信就很清晰了。

以上就是C# 怎么在 Blazor 中进行组件间通信_C# Blazor 组件通信方法详解的详细内容，更多请关注php中文网其它相关文章！