目的：

本文将讲述组件的方法和性质，帮助开发者熟练使用和开发自定义组件；

组件可大致分为三大类，布局组件、页面组件和控件组件；

1. 布局组件：

工程自带的布局组件名为MainLayout.razor，其位于Shared文件夹下。

该组件的功能是为网页界面提供一个基本的模板，而其他的如页面类型的组件将在模板组件的内部绘制，相当于组件树中的子组件。

自带的页面布局组件长这样：

它的代码长这样：

可以看到该布局是由左侧的一个导航栏和右侧的页面主体组成，红色区是一个控件组件，直接用MavMenue调用的，黄色区是顶部标题栏，右侧有一个可点击的文本超链接About，蓝色区是页面组件位置，也就是那个@Body，到时候会把自定义的页面组件替换到这里显示；

观察代码，可发现顶部存在一行“@inherits LayoutComponentBase”，该语句代表本组件属于布局组件，可设定为程序启动的第一个默认布局；

如果希望某页面组件使用该布局显示的话，需要在页面组件的顶部指定："@layout 布局组件"； 如果希望指定某布局组件为程序运行的第一个布局的话，可在App.razor中将自带的MainLayout替换掉，如：

MyLayout1就是我的自定义布局组件。上面代码是在指定一般和错误状态下的布局，有兴趣可另行学习，在此不做详解；

2. 页面组件：

页面组件也有同布局组件类似的标志：@page "/路由"

页面组件代码长这样：

上面代码是工程自带的Index.razor组件，该组件作为页面组件，也是所有页面组件的根组件，因为其路由"/"，一上来就加载它；

页面组件会在布局组件的@Body处绘制；

3. 控件组件：

如果某组件没有布局组件和页面组件的标志的话，那么该组件就是普通的控件组件；

控件组件多用于将经常复用的控件封装为组件或试图界定图形渲染范围；

如按钮等，明确需要在很多地方使用，且具备通用基本的功能以及少量可通过接口传递的可变属性的话，则需要封装为独立组件；

新建工程自带的SurveyPrompt.razor组件代码如下：

该组件在页面组件Index.razor中被引用，包含一个string类型的Title接口；

控件组件在使用的时候可同其他html标签一样，使用尖括号和组件名调用，当然前提是该组件的位置有在import文件中添加引用，否则将不会出现深紫色的标识，意为找不到；

以上就是Blazor中对于各类组件的介绍，更详细的使用技巧可参考：----------------