原文鏈接：https://blazor-university.com/components

組件

所有呈現的 Blazor 視圖都來自 ComponentBase 類，這包括布局、頁面和組件。

Blazor 頁面本質上是一個帶有 @page 指令的組件，該指令指定瀏覽器必須導航到的 URL 才能呈現它。事實上，如果我們比較生成的組件代碼和頁面代碼，差別很小。可以在文件夾 obj\Debug\netcoreapp3.0\Razor\Pages 中的 Counter.razor.g.cs 中找到以下生成的源代碼。

namespace?MyFirstBlazorApp.Client.Pages {[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))][Microsoft.AspNetCore.Components.RouteAttribute("/counter")]public?class?Counter?:?Microsoft.AspNetCore.Components.ComponentBase{protected?override?void?BuildRenderTree(Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder?builder){//?Code?omitted?for?brevity}private?int?counter?=?42;private?void?IncrementCounter(){counter++;}} }

[Microsoft.AspNetCore.Components.RouteAttribute("/counter")] 標識頁面的 URL。

[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))] 標識要使用的布局。

事實上，由于頁面只是裝飾有附加屬性的組件，因此如果您更改默認 Blazor 應用程序的 Pages/Index.razor 文件，則可以將 Counter 頁面嵌入為組件。

@page?"/"<h1>Hello,?world!</h1> Welcome?to?your?new?app. <Counter/>

在另一個頁面中嵌入頁面時，Blazor 將其視為一個組件。嵌入頁面上的 LayoutAttribute 將被忽略，因為 Blazor 已經有一個顯式容器 - 包含它的父組件。

創建組件

源代碼^[1]

在客戶端應用程序中創建一個名為 Components 的新文件夾。這不是一個特殊的名稱，我們可以選擇任何我們想要的名稱。

創建新的 Components 文件夾后，在其中創建一個名為 MyFirstComponent.razor 的文件并輸入以下標記。

<div><h2>This?is?my?first?component</h2> </div>

現在編輯 Index.razor 文件。此時，我們可以使用完全限定名稱引用組件：

<CreatingAComponent.Client.Components.MyFirstComponent/>

或者編輯 /_Imports.razor 并添加 @using CreatingAComponent.Client.Components。這里的 using 語句級聯到所有 Razor 視圖中——這意味著使用 /Pages/Index.razor 中的新組件的標記不再需要命名空間。

@page?"/"<h1>Hello,?world!</h1> <MyFirstComponent/>Welcome?to?your?new?app.<SurveyPrompt?Title="How?is?Blazor?working?for?you?"?/>

現在運行應用程序，我們將看到以下內容。

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/CreatingAComponent

總結

以上是生活随笔為你收集整理的Blazor University （3）组件 — 创建组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。