本文主要讨论Blazor事件内容，由于blazor事件部分很多，所以会分成上下两篇，本文为第一篇，后续会有第二篇。
我们可以视组件是一个类，我们先看一下前文所说的Index.Razor页面生成的C#代码。
在此，先补充一下该页面的原始代码：
1: @page "/"
2: @layout MyLayout 3: <h1>Hello, world!</h1> 4: 5: Welcome to your new app.
6: 7: <SurveyPrompt Title="How is Blazor working for you?" />
Index.razor页面在项目编译后会生成Index.razor.g.cs文件，其位置如图所示，在obj文件夹下面：
具体的源码如下：
1: [Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MyLayout))]
2: [Microsoft.AspNetCore.Components.RouteAttribute("/")]
3: public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
4: {5: #pragma warning disable 1998
6: protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
7: {8: __builder.AddMarkupContent(0, "<h1>Hello, world!</h1> Welcome to your new app. ");
9: __builder.OpenComponent<BlazorApp.Client.Shared.SurveyPrompt>(1);10: __builder.AddAttribute(2, "Title", "How is Blazor working for you?");
11: __builder.CloseComponent(); 12: }13: #pragma warning restore 1998
14: }可以看到，以上代码并不难理解，同时它还有两个特性，一个是布局的标识，一个是路由的标识。紧接着就是该类重写了BuildRenderTree方法，这个以后会说。需要提醒的是，大家在写Blazor项目遇到问题时，可以多查看razor页面所生成的C#代码。
创建简单组件需要注意的是，在Blazor项目中，包括razor页面，布局以及组件都隐式或显示的继承自ComponentBase的。
在Blazor.Client项目的Shared文件夹中，我们创建一个Components文件夹用于存放我们自定义的组件。
（1）创建页面，并暂且先使用下面的默认内容
（3）在Index.razor页面使用
（4）运行后的结果如图所示
如果读者接触了比较多的前端框架，可能会对理解单项绑定有很大的帮助，这实际上一种插值或者说是动态数据的占位(变量)。
大部分情况下，我们都希望我们的组件是可以输出动态内容，那么我们应该如何实现呢？这个时候我们就需要在页面上写一写C#代码了。
（1）在MyComponent组件中添加参数，并标记[Parameter]特性
（2）在Index页面上，添加按钮和事件功能，可以参考Counter页面的按钮
这个页面的功能我们暂时只关注如何传值即可，也就是在调用MyComponent组件的时候，调用其属性Counter并赋值。
（3）运行效果如下所示
添加组件自定义事件，其实就是声明一个EventCallback<int>类型的组件参数，如下代码所示：
1: [Parameter]2: public EventCallback<int> EventSample { get; set; }
（1）自定义组件修改
增加一个计数方法，可以参考Counter中代码。在IncrementCount方法中，采用await ClickCountCallback.InvokeAsync(currentCount*2)方式传值给Index.Razor页面，页面源码：
1: @*<h3>My Component</h3>*@ 2: 3: 这里是自定义组件的区域，我点击了几次 <strong style="color: red">@currentCount</strong>
4: <br>5: <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
6: 7: @code {8: private int currentCount { get; set; }
9: 10: [Parameter]11: public EventCallback<int> ClickCountCallback { get; set; }
12: 13: private async Task IncrementCount()
14: { 15: currentCount++; 16: await ClickCountCallback.InvokeAsync(currentCount*2); 17: } 18: }（2）Index.razor页面
1: @page "/"
2: @layout MyLayout 3: <h1> </h1> 4: 5: @*Welcome to your new app.*@
6: 7: @*<SurveyPrompt Title="How is Blazor working for you?" />*@
8: 9: <h2>Index页面的CurrentCount=<strong style="color: red">@currentCount</strong></h2>
10: 11: <br>12: <MyComponent ClickCountCallback="IncrementCount1" />
13: <br /> 14: 15: @code {16: private int currentCount;
17: 18: private void IncrementCount1(int value)
19: {20: currentCount = value;
21: } 22: }使用currentCount接收自定义组件中传来的值。
运行效果如下：
Index.razor页面生成的C#源码如下所示:
会往RenderTreeBuilder对象中添加AddAttribute，用于接收自定义组件回调过来的值。