如何在Blazor中从父组件传递值给子组件

Question

我是c#和blazor的新手。目前，我遇到了一个问题，我不知道如何解决这个问题。因此，正如我在标题中所写的，我需要从父组件传递一个日期参数到子组件。日期已经动态设置，但我挣扎着显示时，模态打开。我将提供下面的代码:

这是父组件:enroll form .razor.cs ->

private StudentReportingViewModel _studentReportingViewModel;
_studentReportingViewModel = new StudentReportingViewModel()
{
SchoolYear = SchoolYears[1]
};

日期设置正确，我可以记录和看到真正的日期。

在模板- EnrollmentForm。Razor我可以像这样在事件点击时显示子组件(modal):

@if (_displayEnrollmentModal)
{
<ConfirmEnrollmentModal EnrollmentConfirmations="EnrollmentConfirmations" CloseConfirmEnrollmentModal="CloseConfirmEnrollmentModalAsync"/>
}

在打开模态时，我应该在一个div中显示日期，像这样:

<div class="alert alert-warning mt-3 p-2" role="alert">
--setDateProp--
</div>

你知道怎么做吗?提前感谢

Answer 1

在你的ConfirmEnrollmentModal.razor.cs文件，添加以下属性:

[Parameter]
public DateTime SchoolYear { get; set; }

这意味着ConfirmEnrollModal组件需要一个名为SchoolYear的参数。

然后在registrmentform .razor将日期值传递给SchoolYear参数

@if (_displayEnrollmentModal)
{
<ConfirmEnrollmentModal EnrollmentConfirmations="EnrollmentConfirmations" 
CloseConfirmEnrollmentModal="CloseConfirmEnrollmentModalAsync"
SchoolYear = "<yourDateValue>" 
/>
}

confirmenrollmentmode .razor，进行以下更改:

<div class="alert alert-warning mt-3 p-2" role="alert">
@SchoolYear
</div>