本文へスキップ
BecomeCoder

Blazorコース · 第3章 コンポーネントを部品にする · レッスン10

子から親へ ― EventCallback

ローカル実施

導入

親→子は[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です。