如何在 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() {
    ...
  }
}

我怎样才能Append("something")从打电话SomeMethod()？

Answer 1

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

富

@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.