Blazor 子组件与父组件通过 ChildEvents 传递数据的方法

想要实现 Blazor 子组件向父组件传递数据, 参考 痴者工良的博文所描述的方式, .Net 5.0 下编译未能通过, 于是先修改一下, 简化为光触发事件通知而不传值

子组件 Child.razor :

复制代码
<input @bind="Value" />
<button @onclick="StartEvent">传递到父组件</button>
@code{
    private string Value;
    [Parameter]
    public EventCallback<string> ChildEvents { get; set; }
    private async Task StartEvent()
    {
        if (ChildEvents.HasDelegate)
        {
            await ChildEvents.InvokeAsync(Value);
        }
    }
}
复制代码

父组件 Parent.razor :

复制代码
@page "/p"
<div class="bg-primary jumbotron  text-white">
    子组件:
    <Child ChildEvents="@MyEvent" />
    <br />
    父组件:
    <p>@_Value</p>
</div>
@code{
    private string _Value;
    private void MyEvent()
    {
         Console.WriteLine("Got the ChildEvents");
    }
}    
复制代码

调试通过, 子组件触发事件后, 父组件可以进入 MyEvent()。要传数据怎么办? 我摸索半天, 可以参照按钮事件用委托来实现。

修改后可接受参数的父组件 Parent.razor

复制代码
@page "/p"
<div class="bg-primary jumbotron  text-white">
    子组件:
    <Child ChildEvents="(e)=>MyEvent(e)" />
    <br />
    父组件:
    <p>@_Value</p>
</div>
@code{
    private string _Value;
    private void MyEvent(object Value)
    {
         Console.WriteLine($"Got the ChildEvents({Value})");
         _Value = Value.ToString();
    }
}    
复制代码

需要注意的是 ClientEvents 委托里面的参数类型只能是 object

posted @   树欲静·而风不止  阅读(1113)  评论(1编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示