想要實現 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