Blazor-父子组件回调方法

MaybeHC

发布于 2025-02-14 08:37:38

4100

代码可运行

文章被收录于专栏：技术之路技术之路

运行总次数：0

代码可运行

子组件调用父组件方法

在组件中，要实现从父组件向子组件传值，可以在父组件中给参数属性赋值。想要达成这一效果，需要在子组件中使用[Parameter]特性，将属性定义为参数类型的属性。简单来说就是以下几个步骤：

子组件中定义[Parameter]特性，EventCallback类型的属性，绑定给对应的事件
父组件给EventCallback类型的属性赋值
子组件触发对应的事件将调用EventCallback从而调用父组件方法

下面看看示例：子组件：

<p>子组件中</p>
<button @onclick="InfoChanged">子组件按钮</button>
@code {
    [Parameter]
    public EventCallback<MouseEventArgs> InfoChanged { get; set; }
}

父组件：

@page "/demoPage"
<Subassembly InfoChanged="InfoChanged"></Subassembly>
<h3>DemoPage</h3>
<p>父组件值 @info</p>
@code {
    private string? info = "初始值";
    private void InfoChanged(MouseEventArgs mouseEventArgs)
    {
        info = "Info changed";
   }
}

子组件调用父组件方法传参数

方法调用传参数的本质还是在子组件中创建回调事件，由父组件为回调事件指定方法，之后子组件调用回调事件就可以实现参数的传递。子组件：

<h3>Subassembly</h3>
<button @onclick=UpdateInfo>子组件按钮</button>
@code {
    [Parameter]
    public EventCallback<string> eventCallback { get; set; }
    public void UpdateInfo()
    {
        eventCallback.InvokeAsync("子组件传值");
    }
}

父组件：

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<p>父组件info: @info</p>
<Subassembly eventCallback="ShowInfo"></Subassembly>
@code {
    private string? info;
    public void ShowInfo(string str){
        this.info = str;
    }
}

我们在父组件中为子组件中的EventCallback指定了方法，当子组件调用EventCallback时就会触发父组件中的方法，我们看看运行的效果点击前：