Blazor 子组件与父组件通过 ChildEvents 传参的方法

时间:2021-07-12
本文章向大家介绍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

原文地址:https://www.cnblogs.com/towerbit/p/15001381.html