Blazor 元件之間的傳值方式極簡總結

2025-01-16 07:22:36 | .NET | 83 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1082

Blazor 提供以下主要傳值方式：

  1. 父元件向子元件傳遞資料：使用 [Parameter] 定義參數。

    <ProductCard Product="product" />

  2. 子元件向父元件通知事件：使用 EventCallback。

    <ProductCard OnProductSelected="HandleSelection" />

  3. 父子元件雙向資料綁定：使用 @bind 實現同步。

    <EditProductForm Product="@SelectedProduct" />

  4. 層級資料傳遞：使用 CascadingParameter 傳遞全域資料。

    <CascadingValue Value="CurrentUser">
    <UserProfile />
</CascadingValue>

  5. 全域資料分享：使用相依性注入（DI）。

    @inject AppState AppState
<p>@AppState.CurrentUser</p>

選擇適合的傳值方式，實現高效、清晰的元件通信！

This article was last edited at 2025-01-16 07:25:39