c# - Blazor 将数据从父级传递给子级
问题描述
我有一个取决于其父类的剃须刀页面和第二个子类,它有自己的类并从其父类接收数据,我的问题是对 api 的第二次调用,数据没有传递给第二个孩子,当其父级更改其数据时,第二个子级不会被渲染,但它适用于第一个渲染并且正在传递数据。
父剃刀
@inherits ParentBase;
<FirstChild/>
<SecondChild data="@data"/>
FirstChild.剃须刀
@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();
}
}
SecondChild.剃须刀
<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);
}
}
解决方案
仅仅因为Parent.razor
andFirstChild.razor
继承自同一个类,并不意味着两个类 ( public Data data { get; set; }
) 的数据在更改时将具有相同的值。
当您调用callApi
时FirstChild
,它会更改它自己的data
,如果您想更改父级的data
,您需要传递一个参数,FirstChild
该参数将是一个在span
单击时调用的函数,它将调用Parent
's 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" />
推荐阅读
- wordpress - 插件页面上的 Wordpress MEga 菜单插件错误
- powershell - 设置当前位置以匹配与运行脚本驱动器相同的驱动器号
- c# - 如何修复无效的 URI:在 asp.net 核心问题中无法确定 URI 的格式
- java - 休眠。删除未使用的条目
- react-native - Android上的react-native-video黑屏
- c++ - 在 qml 中等待后端 C++
- generics - 如何创建包含更高维度的代数矩阵的结构?
- asp.net-mvc - MVC - 将路径传递给控制器中的操作
- php - Laravel 5.7 使用 tymon/jwt 使用电子邮件/用户名和密码进行身份验证
- mysql - 如果我在查询中使用存储过程参数,MySQL 查询不会执行