使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式

Windows Linux macOS

修改元件

元件參數會使用屬性或子內容指定，這讓您可設定子元件的內容。在Counter元件上定義參數，以指定每次按下按鈕的遞增量:

  • 為具有 [Parameter] 屬性的 IncrementAmount 新增公用屬性。
  • 遞增 currentCount 的值時，請將 IncrementCount 方法變更為使用 IncrementAmount。

下列程式碼會顯示如何實現。醒目提示的線條會顯示變更。

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

在 Home.razor 中，更新 <Counter> 元素以新增IncrementAmount 屬性，該屬性會將遞增量變更為 10，如以下程式碼中醒目提示的行所示:

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

按一下 [熱重新載入] 按鈕，將變更套用至應用程式。Home 元件現在有自己的計數器，每當選取 [按我] 按鈕時，計數器就會以 10 遞增，如下列影像所示。/counter 的 Counter 元件 (Counter.razor) 會繼續以 1 遞增。

Home 元件現在有自己的計數器，每當選取 [按我] 按鈕時，計數器就會以 10 遞增，如下列影像所示。/counter 的 Counter 元件 (Counter.razor) 會繼續以 1 遞增。

此首頁包含依 10 遞增的計數器，現在顯示於 40 的計數器。