導入
親→子は[Parameter]。では子で起きたこと(ボタンが押された等)を親に知らせるには? それがEventCallbackです。「発行側・購読側」の考え方が、そのままコンポーネント間の通信になります。
説明
子は[Parameter] public EventCallback OnXxxを公開し、自分のイベントでInvokeAsyncします。親はそこに自分のメソッドを渡します。
@* --- ChildButton.razor(子) --- *@
<button @onclick="Clicked">@Label</button>
@code {
[Parameter] public string Label { get; set; } = "OK";
[Parameter] public EventCallback OnClicked { get; set; }
private async Task Clicked()
{
await OnClicked.InvokeAsync(); // 親に通知する
}
}
@* --- 親 --- *@
<p>押された回数: @count</p>
<ChildButton Label="押して" OnClicked="Increment" />
@code {
private int count = 0;
private void Increment() => count++;
}
- 子は
EventCallback(値付きならEventCallback<T>)をパラメータとして公開する - 子は自分のイベントで
OnClicked.InvokeAsync(値)を呼び、親へ通知 - 親は
OnClicked="Increment"のように自分のメソッドを渡す - これは「子が発行、親が購読」——イベントのUI版
まとめ
- 子→親の通知は
EventCallback/EventCallback<T> - 子は
InvokeAsyncで発火、親はメソッドを渡して受け取る - 親→子(Parameter)と往復させて、双方向のやり取りが完成する
次回: 子コンポーネントの中身を親から差し込むChildContentです。