zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    hiho_1139_二分+bfs搜索
    hiho_1138_island_travel
    google_apactest_round_A_problem_D
    hiho1122_二分图匈牙利算法
    hiho1123_好配对
    hiho1096_divided_product
    hiho1099_constellation
    hiho1093_spfa
    hiho1092_have lunch together
    【ipad神坑】ipad麦克风听不到声音怎么回事 微信QQ语音视频对方都听不到
  • 原文地址:https://www.cnblogs.com/towerbit/p/15001381.html
Copyright © 2011-2022 走看看