想要实现 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