如何从blazor中的父组件调用子组件方法？

Question

我有两个组件。第一个组件包括模型列表第二个组件包含模态形式我想在第一个组件内单击模型在第二个组件中，打开模态并编辑模型如何从父组件调用子组件中的显示功能

<ChildComponent />
<button onClick="@ShowModal">show modal</button>

@code{
    ChildComponent child; 

    void ShowModal(){
        child.Show();
    }
}

我用过@using 但是此代码有错误：

the type or namespace name ChildComponent coud not be found

Answer 1

首先您需要获取子组件的引用：

<ChildComponent @ref="child" />

然后您可以像在代码中一样使用此引用来调用子组件方法。

<button onClick="@ShowModal">show modal</button>

@code{
    ChildComponent child; 

    void ShowModal(){
        child.Show();
    }
}

您的组件的名称空间需要通过在页面或 _Imports.razor 中使用来添加。如果您的组件位于子文件夹 Components/ChildComponent.razor 中，则其命名空间为 {YourAppNameSpace}.Components

@using MyBlazorApp.Components

read the code

Answer 2

这是我刚刚发布的关于使用接口主题的文章：

https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html

在此示例中，索引页是一个 IBlazorComponentParent 对象。

在登录组件上，最酷的部分是设置 Parent 属性，您只需设置 Parent=this:

它的工作方式是 setter 父级属性在 Login 组件上调用父级的 Register 方法：

[Parameter]
public IBlazorComponentParent Parent
{
    get { return parent; }
    set 
    { 
        // set the parent
        parent = value;

        // if the value for HasParent is true
        if (HasParent)
        {
            // Register with the parent to receive messages from the parent
            Parent.Register(this);
        }
    }
}

然后在父组件或页面上，Register方法存储组件的引用：

public void Register(IBlazorComponent component)
{
    // If the component object and Children collection both exist
    if (NullHelper.Exists(component, Children))
    {
        // If this is the Login component
        if (component.Name == "Login")
        {
            // Set the Login control
            this.Login = component as Login;
        }

        // add this child
        Children.Add(component);
    }
}

此时，父页面和登录页面可以相互通信，因为它们都包含一个 ReceiveData 方法，您可以在其中发送消息。

如何从blazor中的父组件调用子组件方法？

how to call child component method from parent component in blazor?

blazor

asp.net-blazor