パラメータとデータの受け渡し｜ASP.NET×Blazor入門 3.3

3.3 パラメータとデータの受け渡し

Blazorでは、画面を構成するコンポーネント同士が互いにデータを受け渡しながら連携します。とくに親コンポーネントと子コンポーネントの間でのやりとりは、アプリ全体の設計に大きく関わります。このセクションでは、@Parameter を使った「親 → 子」の値の受け渡しと、EventCallback による「子 → 親」への通知、そしてその発展形である @bind による双方向バインディングについて解説していきます。

親から子へ：@Parameter による値の受け渡し

まず、親コンポーネントから子コンポーネントへデータを渡す方法です。子側では @Parameter 属性を使って受け取ります。

<!-- Hello.razor -->
<p>こんにちは、@Name さん！</p>

@code {
    [Parameter]
    public string Name { get; set; } = "ゲスト";
}

親コンポーネントからは、次のようにプロパティを指定して呼び出します。

<Hello Name="太郎" />

このように、外部からパラメータとして値を渡すことで、コンポーネントの表示や振る舞いを柔軟に変えることができます。

子から親へ：EventCallback による通知

逆に、子コンポーネントから親に対して何かを伝えたい場合は、EventCallback<T> を使います。たとえば、ボタンをクリックしたときに親に通知を送るようなケースです。

<!-- Child.razor -->
<button @onclick="NotifyParent">通知する</button>

@code {
    [Parameter]
    public EventCallback<string> OnNotify { get; set; }

    private async Task NotifyParent()
    {
        await OnNotify.InvokeAsync("子からの通知です");
    }
}

<!-- 親コンポーネント -->
<Child OnNotify="HandleNotify" />

@code {
    private void HandleNotify(string message)
    {
        Console.WriteLine($"親が受け取ったメッセージ: {message}");
    }
}

この構造によって、子コンポーネントでのユーザー操作を親が受け取り、処理することが可能になります。

双方向バインディング：@bind の仕組み

Blazorでは @bind を使って、入力値の双方向バインディングを簡潔に記述できます。ただし内部的には、値と変更イベントを分けて扱っています。

<!-- InputName.razor -->
<input @bind="Name" />

@code {
    [Parameter]
    public string Name { get; set; }

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

親コンポーネント側で @bind-Name を指定するだけで、値の受け渡しと変更通知の両方が機能するようになります。カスタム入力コンポーネントを作る際にもこの仕組みを知っておくと便利です。