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

  • 相关阅读:
    Codeforces Round #365 Div.2
    Codeforces Round #363 Div.2[111110]
    花花的礼物 (huahua)
    FOI2019算法冬令营D1
    树(tree)
    noip2018
    1972: 最短路(shortest)
    2462: 收集(collecting)
    1282: 排列计数 perm
    1425: 数列(seq)
  • 原文地址:https://www.cnblogs.com/towerbit/p/15001381.html
Copyright © 2011-2022 走看看