Blazor 将数据从父级传递给子级

Question

我有一个 razor 页面，它依赖于它的父类和一个有自己的类并从其父类接收数据的第二个孩子，我的问题是对 api 的第二次调用，数据没有传递给第二个孩子，当其父项更改其数据时，第二个子项不会被渲染，但它可以在第一个渲染器上工作并且正在传递数据。

Parent.razor

@inherits ParentBase;

<FirstChild/>
<SecondChild data="@data"/>

FirstChild.razor

@inherits ParentBase;

// call its parent method
<span  @onclick='(() => callApi())'/> 

父数据库

public class ParentBase : ComponentBase
{
   public Data data { get; set; }
   protected override async Task OnInitializedAsync()
   {
       data = await Services.GetData();
   }
   // call from a child
   public void callApi
   {
     data = await Services.GetData();
   }
}

SecondChild.razor

<Table data="@data"/>

SecondChildBase.cs

public class SecondChildBase : ComponentBase
{
   [Parameter]
   public Data data { get; set; }

   protected override void OnParametersSet()
   {
       // this is not getting called
       StateHasChanged();
       Console.WriteLine(data);
   }
}

Answer 1

仅仅因为Parent.razor和FirstChild.razor继承自同一个类，并不意味着两个类（public Data data { get; set; }）的数据在更改时将具有相同的值。

当您调用callApi时FirstChild，它会更改它自己的data，如果您想更改父级的data，您需要传递一个参数，FirstChild该参数将是单击时调用的函数span，该Parent函数将调用 的callApi。

FirstChild.剃刀

<span @onclick="OnClick">Call Parent function</span>

@code 
{
    // Call this EventCallback when the span is clicked
    [Parameter]
    public EventCallback OnClick { get; set; }
}

家长剃刀

@inherits ParentBase;

@* Passing OnClick Parameter to call callApi*@
<FirstChild OnClick="@callApi" />
<SecondChild data="@data" />