使用 ChildEvents 在 Blazor 中实现子组件与父组件之间的参数传递

最编程 2024-08-07 14:51:51

...

想要实现 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

上一篇： Python爬虫技巧大揭秘！轻松获取VIP视频资源（附带源代码）

下一篇：发布 .NET 事件的步骤和准则

使用 ChildEvents 在 Blazor 中实现子组件与父组件之间的参数传递

使用 ChildEvents 在 Blazor 中实现子组件与父组件之间的参数传递

在Vue中，如何将对话框作为子组件并处理好父子组件之间的参数传递问题？

在 Vue 中使用 Slot 插槽是组件中的实用必备知识，它还能实现父组件和子组件之间的通信。

通过 ChildEvents 在 Blazor 子组件和父组件之间传递数据的方法

在 Vue3 父组件和子组件之间传递参数通信的四种方法