前言

本篇文章同步發表於 個人部落格 Jim's Blog

今日介紹的內建元件是 CascadingValue 用途是從父元件傳遞參數到子元件，而無需使用傳統的參數

基本用法

父元件

@page "/parent"
<CascadingValue Value="@Content">
    <Child></Child>
</CascadingValue>

@code {
    string Content = "國慶快樂";
}

子元件

<h1>@Content</h1>

@code {
        [CascadingParameter] 
        string Content { get; set; }
}

如果異動了 CascadingValue 參數的內容，會傳遞到所有的後代，並且呼叫 StateHasChanged

多個 CascadingValue 參數

如果想要傳遞多個值怎麼辦?

錯誤的錯法

父元件

@page "/parent"
<CascadingValue Value="@Date">
    <CascadingValue Value="@Content">
        <Child></Child>
    </CascadingValue>
</CascadingValue>

@code {
    string Date = $"{DateTime.Now.Date:yyyy MM dd}";
    string Content = "國慶快樂";
}

子元件

<h1>@Date @Content</h1>

@code {
    [CascadingParameter]
    string Date { get; set; }

    [CascadingParameter]
    string Content { get; set; }
}

結果不是預期的 2022 10 10 國慶快樂，會這樣的原因是當有多個CascadingValue 時，需要讓 Blaozr 有辦法去辨別不同，有兩個方法可以做到

使用 Name 屬性

父元件

@page "/parent"
<CascadingValue Value="@Date" Name="Date">
    <CascadingValue Value="@Content" Name="Content">
        <Child></Child>
    </CascadingValue>
</CascadingValue>

@code {
    string Date = $"{DateTime.Now.Date:yyyy MM dd}";
    string Content = "國慶快樂";
}

子元件

<h1>@Date @Content</h1>

@code {
    [CascadingParameter(Name = "Date")]
    string Date { get; set; }

    [CascadingParameter(Name = "Content")]
    string Content { get; set; }
}

這個結果出來的時候我很錯愕，我一直以為今天 10/10，想說怎麼少一天 哈哈哈

使用型別作依據

另一種方式是給予他們不同的型別， Bloazr 會去做搜尋，搜尋到第一個符合型別的就會填入值

父元件

@page "/parent"
<CascadingValue Value="@Date">
    <CascadingValue Value="@Content">
        <Child></Child>
    </CascadingValue>
</CascadingValue>

@code {
    int Date = 20221010;
    string Content = "國慶快樂";
}

子元件

<h1>@Date @Content</h1>

@code {
    [CascadingParameter]
    int Date { get; set; }

    [CascadingParameter]
    string Content { get; set; }
}

小結

使用 CascadingValue 最好且可靠的方式是透過 Name 來使用，以免出現不可預期的問題，這個功能非常好用但是需要注意不要濫用，否則在大型專案可能會增加維護成本，明天介紹內建元件中的 DynamicComponent