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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM