1. 程式人生 > 其它 >Blazor 子元件與父元件通過 ChildEvents 傳參的方法

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