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