如何在 Blazor 中调用子组件的方法

Question

我有Foo.razor:

@foreach (var item in items) {
  <p>@item</p>
}

@code {
  private List<string> items = new List<string>();

  public void Append(string item) => items.Add(item);
}

如果我有Bar.razor:

<Foo/>

@code {
  public void SomeMethod() {
    ...
  }
}

如何从SomeMethod() 呼叫Append("something")？

Answer 1

以下是使用@ref 属性的示例。 @ref 提供了一种引用组件实例的方法。请参考：Blazor Components

富

@foreach (var item in items)
{
    <p>@item</p>
}

@code {
    private List<string> items = new List<string>();

    public void Append(string item) =>items.Add(item);

    public void Refresh()
    {
        this.StateHasChanged(); //To refresh component after we have added items
    }
}

酒吧

<Foo @ref="foo"/>

<button class="btn btn-primary" @onclick="SomeMethod">Add items</button>

@code {

    Foo foo;

    public void SomeMethod()
    {
        foo.Append("item1");
        foo.Refresh();
    }

}

注意：

The component variable is only populated after the component is rendered and its output includes the component's element. Until that point, there's nothing to reference. To manipulate components references after the component has finished rendering, use the OnAfterRenderAsync or OnAfterRender methods.