Blazor 子元件與父元件通過 ChildEvents 傳參的方法
阿新 • • 發佈:2021-07-12
想要實現 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