練習：新增元件

4 分鐘

在此練習中，您會將 Razor 元件新增至應用程式的首頁。

將計數器元件新增至首頁

在 Visual Studio 方案總管中展開資料夾。如果方案總管沒有顯示，請選取 [檢視]>[方案總管]。
選取 [元件/頁面] 以檢視現有的 Razor 頁面。
選取 Home.razor 檔案將其開啟。
在 Home.razor 檔案結尾新增 <Counter /> 元素，即可將 Counter 元素新增至頁面。
```
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />
```

如果您的應用程式仍在執行中，請儲存檔案，並選取經常性存取層重新載入 (Alt+F10) 命令，讓 Counter 元件顯示在 [首頁] 頁面。在執行中的應用程式中，選取另一個索引標籤，然後選取 [首頁] 索引標籤以返回 [首頁] 頁面，確認計數器會隨即出現。如果您先前已停止偵錯，請選取 [偵錯] > [開始偵錯]，以再次啟動應用程式。

當您準備好停止時，請返回 Visual Studio，然後按 Shift+F5 以停止應用程式。

如果您的應用程式仍在執行中，請返回 Visual Studio Code，然後按 Shift+F5 以停止應用程式。選取 [執行]>[開始偵錯] 以儲存檔案並重新啟動應用程式

當您準備好停止時，請返回 Visual Studio Code，然後按 Shift+F5 以停止應用程式。

首頁上計數器元件的螢幕擷取畫面。

修改元件

元件參數是使用屬性或子內容指定的，可讓您設定子元件的屬性。在 Counter 元件上定義參數，以指定每個按鈕點擊的遞增量：

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

更新 Counter.razor 檔案中的程式碼，如下所示：

@page "/counter"

<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，如下列最後一行程式碼所示：

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

再次啟動應用程式

Home 元件現在有自己的計數器，您每次選取 [按我] 按鈕時，都會遞增 10，如下圖所示。 /counter 中的 Counter 元件 (Counter.razor) 會繼續遞增 1。

具有計數器更新的首頁螢幕擷取畫面。

練習：新增元件

將計數器元件新增至首頁

修改元件

意見反應