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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章