概述

本文主要討論Blazor事件內(nèi)容，由于blazor事件部分很多，所以會分成上下兩篇，本文為第一篇，后續(xù)會有第二篇。

我們可以視組件是一個(gè)類，我們先看一下前文所說的Index.Razor頁面生成的C#代碼。在此，先補(bǔ)充一下該頁面的原始代碼：

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

Index.razor頁面在項(xiàng)目編譯后會生成Index.razor.g.cs文件，其位置如圖所示，在obj文件夾下面：具體的源碼如下：

[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MyLayout))] [Microsoft.AspNetCore.Components.RouteAttribute("/")] public partial class Index : Microsoft.AspNetCore.Components.ComponentBase {#pragma warning disable 1998protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder){__builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\nWelcome to your new app.\r\n\r\n");__builder.OpenComponent<BlazorApp.Client.Shared.SurveyPrompt>(1);__builder.AddAttribute(2, "Title", "How is Blazor working for you?");__builder.CloseComponent();}#pragma warning restore 1998 }

可以看到，以上代碼并不難理解，同時(shí)它還有兩個(gè)特性，一個(gè)是布局的標(biāo)識，一個(gè)是路由的標(biāo)識。緊接著就是該類重寫了BuildRenderTree方法，這個(gè)以后會說。需要提醒的是，大家在寫B(tài)lazor項(xiàng)目遇到問題時(shí)，可以多查看razor頁面所生成的C#代碼。

創(chuàng)建簡單組件

需要注意的是，在Blazor項(xiàng)目中，包括razor頁面，布局以及組件都隱式或顯示的繼承自ComponentBase的。在Blazor.Client項(xiàng)目的Shared文件夾中，我們創(chuàng)建一個(gè)Components文件夾用于存放我們自定義的組件。（1）創(chuàng)建頁面，并暫且先使用下面的默認(rèn)內(nèi)容。（2）然后在_Imports.razor文件中添加@using BlazorApp.Client.Shared.Components，以使得該組件可以全局使用，從這個(gè)引用的命名空間來看，我們新建的組件的命名空間默認(rèn)就是文件所在的位置。（3）在Index.razor頁面使用（4）運(yùn)行后的結(jié)果如圖所示：

單項(xiàng)綁定

如果讀者接觸了比較多的前端框架，可能會對理解單項(xiàng)綁定有很大的幫助，這實(shí)際上一種插值或者說是動態(tài)數(shù)據(jù)的占位(變量)。大部分情況下，我們都希望我們的組件是可以輸出動態(tài)內(nèi)容，那么我們應(yīng)該如何實(shí)現(xiàn)呢？這個(gè)時(shí)候我們就需要在頁面上寫一寫C#代碼了。（1）在MyComponent組件中添加參數(shù)，并標(biāo)記[Parameter]特性（2）在Index頁面上，添加按鈕和事件功能，可以參考Counter頁面的按鈕。這個(gè)頁面的功能我們暫時(shí)只關(guān)注如何傳值即可，也就是在調(diào)用MyComponent組件的時(shí)候，調(diào)用其屬性Counter并賦值。（3）運(yùn)行效果如下所示

組件事件

添加組件自定義事件，其實(shí)就是聲明一個(gè)EventCallback類型的組件參數(shù)，如下代碼所示：

[Parameter] public EventCallback<int> EventSample { get; set; }

（1）自定義組件修改 增加一個(gè)計(jì)數(shù)方法，可以參考Counter中代碼。在IncrementCount方法中，采用await ClickCountCallback.InvokeAsync(currentCount*2)方式傳值給Index.Razor頁面，頁面源碼：

@*<h3>My Component</h3>*@這里是自定義組件的區(qū)域，我點(diǎn)擊了幾次 <strong style="color: red">@currentCount</strong> <br> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount { get; set; }[Parameter]public EventCallback<int> ClickCountCallback { get; set; }private async Task IncrementCount(){currentCount++;await ClickCountCallback.InvokeAsync(currentCount*2);} }

（2）Index.razor頁面

@page "/" @layout MyLayout <h1>?</h1>@*Welcome to your new app.*@@*<SurveyPrompt Title="How is Blazor working for you?" />*@<h2>Index頁面的CurrentCount=<strong style="color: red">@currentCount</strong></h2><br> <MyComponent ClickCountCallback="IncrementCount1" /> <br />@code {private int currentCount;private void IncrementCount1(int value){currentCount = value;} }

使用currentCount接收自定義組件中傳來的值。運(yùn)行效果如下：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Blazor带我重玩前端(五)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。