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

Question

我有两个组成部分。 第一部分包括型号清单 第二部分包含模态形式 我想在第一个组件中单击模型 在第二个组件中，打开模态并编辑模型 如何从父组件调用子组件中的show函数

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

@code{
    ChildComponent child; 

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

我曾经使用@using但 该代码有错误：

找不到类型或名称空间名称ChildComponent代码

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：

它的工作方式是Login组件上Parent属性的设置方法，它调用父方法上的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方法，您可以在其中发送消息。