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

Question

I have a razor page which depends on its parent's class and a second child which has its own class and receive data from its parent, my issue is on the second call to the api, the data is not being passed to the second child, the当其父级更改其数据时，第二个子级不会被渲染，但它适用于第一个渲染并且正在传递数据。

父.razor

@inherits ParentBase;

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

FirstChild.razor

@inherits ParentBase;

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

ParentBase.cs

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();
   }
}

二孩.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继承自同一个 class，并不意味着两个类的public Data data { get; set; } 。

当你在FirstChild中调用callApi时，它会改变它自己的data ，如果你想改变父级的data ，你需要传递一个参数给FirstChild这将是一个 function 在点击span时调用，这将调用Parent的callApi 。

FirstChild.razor

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

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

父.razor

@inherits ParentBase;

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

Answer 2

我认为您可以尝试数据绑定而不是 CascadingParameter。

文档在这里： https://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1

特别是关于以下两个主题：

• 使用组件参数的父子绑定
• 使用链式绑定的子到父绑定

示例：父组件

<PasswordField @bind-Password="password" />

@code {
    private string password;
}

示例：子组件

<input @oninput="OnPasswordChanged" 
       required 
       type="@(showPassword ? "text" : "password")" 
       value="@Password" />

@code {
    private bool showPassword;
    private string password;
    private string validationMessage;

    [Parameter]
    public string Password
    {
        get { return password ?? string.Empty; }
        set
        {
            if (password != value)
            {
                if (value.Contains(' '))
                {
                    validationMessage = "Spaces not allowed!";
                }
                else
                {
                    password = value;
                    validationMessage = string.Empty;
                }
            }
        }
    }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();

        return PasswordChanged.InvokeAsync(Password);
        }

    }

您的子组件需要提供一个 {Password}Changed，其中 {} 是您的参数。 这样，当孩子更新时，父母也会更新（以及所有其他绑定参数）

Answer 3

只需在服务调用简单后将 StateHasChanged() 移动到基础......