《进击吧！Blazor！》是本人与张善友老师合作的Blazor零基础入门系列视频，此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
视频地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
本系列文章是基于《进击吧！Blazor！》直播内容编写，升级.Net5，改进问题，讲解更全面。因为篇幅有限，文章中省略了部分代码，完整示例代码：https://github.com/TimChen44/Blazor-ToDo
作者：陈超超
Ant Design Blazor 项目贡献者，拥有十多年从业经验，长期基于.Net技术栈进行架构与开发产品的工作，现就职于正泰集团。
邮箱：timchen@live.com
欢迎各位读者有任何问题联系我，我们共同进步。
这次分享我么要聊聊Blazor的精髓，也是我个人认为Blazor框架体系中最优秀的特性——组件。
组件组件（Component）是对数据和方法的简单封装。几乎所有UI相关的框架都有组件（控件）的概念。
早期的Delphi组件叫做VCL（Visual Component Library），它采用自身嵌套的方式组合成所需的用户界面，并提供属性，方法，事件与组件外部进行交互，自身有着独立的生命周期，在必要的时候进行销毁。
之后.Net的WinForms和WPF组件相对于Delphi虽然设计实现上完全不同，但是对组件的定义和用途上几乎一致。
现在Web前端框架Angular中也采用了组件的概念，整体理念依旧相似。
有些框架根据是否可见将组件分为，组件（Component）不可见，控件（Control）可见，比如Delphi，WinForms
纵观这些框架的组件设计，可以提炼出组件包含以下特性。
Blazor应用也是使用组件构建的。组件是自包含的用户界面 (UI) 块，例如页、对话框或窗体。 组件包含插入数据或响应 UI 事件所需的 HTML 标记和处理逻辑。 组件非常灵活且轻量。 可在项目之间嵌套、重复使用和共享。 1.参数（属性）
提供组件外部向组件内部传递数据的方式。
在Blazor中我们称组件的属性（Property）叫参数（Parameter），参数本身就是一个属性，但是为了让Blazor框架能区分两者，所以我们在属性上增加 [Parameter]特性来声明属性为组件的参数。
[Parameter] public string Text { get; set; } 组件参数组件参数可以接收来在razor页面中给与的值，支持简单类型，也可以支持复杂类型。
<!--组件代码--> <h1>Blazor is @Text!</h1> @code { [Parameter] public string Text { get; set; } } <!--组件使用--> <Component Title="Superior">上例就是将Superior通过参数传入组件，组件中就会输出Blazor is Superior!
路由参数组件可以接收来自 @page 指令所提供的路由模板的路由参数。 路由器使用路由参数来填充相应的组件参数。参数类型受限于路由规则，只支持几个基本类型。
<!--页面代码--> @page "/RouteParameter/{text}" <h1>Blazor is @Text!</h1> @code { [Parameter] public string Text { get; set; } }当使用/RouteParameter/Superior地址进行路由时，跳转到上例中的页面，并且页面输出Blazor is Superior!
级联参数在某些情况下，使用组件参数将数据从祖先组件流向子代组件不太方便，尤其是在有多个组件层时。 级联值和参数提供了一种方便的方法，使祖先组件为其所有子代组件提供值，从而解决了此问题。
祖先组件中使用CascadingValue设定需要向下传递的级联值，子代组件中使用 [CascadingParameter] 特性来声明级联参数用于接收级联值。
本文后续会有详细的Demo来讲解此特性，此处暂不展开了。
2.事件事件是一种由组件内部发起，由组件外部处理的一种机制。
对于原始的Html元素与Razor组件在事件的使用上有一些细微差别，下面分开介绍。
Html 元素对HTML 元素的事件采用@on{EVENT}格式（例如 @onclick）处理事件，Razor 组件将此属性的值视为事件处理程序。
<h1>Blazor is @Text!</h1> <button @onclick="OnClick">Button</button> @code { private string Text { get; set; } void OnClick(MouseEventArgs e) { Text = "Superior"; } }点击Button按钮后就触发@onclick事件，然后设置Text的值，最后组件输出Blazor is Superior!
每一个事件都会返回一个参数，@onclick事件返回MouseEventArgs参数，更多详见
跨组件公开事件，可以使用 EventCallback。父组件可向子组件的 EventCallback 分配回调方法，由子组件完成调用。
<!--子组件--> <button @onclick="OnBtnClick">Button</button> @code { [Parameter] public EventCallback<string> OnClick { get; set; } void OnBtnClick(MouseEventArgs e) { if (OnClick.HasDelegate) OnClick.InvokeAsync("Superior"); } } <!--父组件--> <h1>Blazor is @Text!</h1> <Component></Component> @code { private string Text { get; set; } void OnClick(string e) { Text = e; } }