Blazor:子组件向父组件传递数据

2020年5月11日 4049点热度 2人点赞 0条评论
内容目录

子组件无法直接向父组件传递数据,所以先在子组件定义回调事件,然后父组件引用子组件时,将父组件的方法绑定到子组件中,然后在子组件触发回调即可。

子组件 Child.razor :


<input @bind="Value" />
<button @onclick="StartEvent">传递到父组件</button>
@code{
    private string Value;
    [Parameter]
    public EventCallback ChildEvents { get; set; }
    private async Task StartEvent()
    {
        Console.WriteLine(Value);
        if (ChildEvents.HasDelegate)
        {
            Console.WriteLine(Value);
            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(string value)
    {
        _Value = value;
    }
}

痴者工良

高级程序员劝退师

文章评论