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

  • 相关阅读:
    Linux file命令详解
    Linux stat命令详解
    Linux cut命令详解
    Linux tr命令详解
    Linux grep/egrep命令详解
    Linux awk命令详解
    Linux xargs命令详解
    MVC设计模式
    qt博客
    android
  • 原文地址:https://www.cnblogs.com/towerbit/p/15001381.html
Copyright © 2011-2022 走看看