iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

今晚,我想來點Blazor系列 第 13

Day 13:Component Parameters

  • 分享至 

  • xImage
  •  

為了能重複使用元件,我們在使用元件時,可以傳參數過去。
這篇延續Component介紹的按鈕元件範例,原本的按鈕上顯示的是Click me !文字,我們現在將Mybtn稍微修改一下,讓使用時可以傳不同的顯示文字給Mybtn元件。

Paramter用法

  1. 設定一個給呼叫端用的屬性
  2. 在該屬性上設定 [Parameter] 這個attribute
  3. 屬性須設定為internal以上層級
  4. 可傳不同型態的值,除了可傳簡單型別物件之外,也可傳物件、事件過去
  5. 在Mybtn.razor增加一個屬性btnText,並加上[Paramter]這個attribute
    [Parameter]
    public string btnText { get; set; }

使用binding方式,將Click Me !文字改成@btnText

<div>
    <a class="@btnStyle" @onclick="ToggleColor">@btnText</a>
</div>

@code {

    [Parameter]
    public string btnText { get; set; }

    string btnStyle = "btn-blue";

    void ToggleColor()
    {
        btnStyle = btnStyle == "btn-blue" ? "btn-green" : "btn-blue";
    }
}

使用Mybtn時,在元件標籤上直接設定btnText的值就可以了

<Mybtn btnText="Hello" />

上一篇
Day 12:Binding
下一篇
Day 14:Arbitrary Parameter 任意參數
系列文
今晚,我想來點Blazor30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言