Study Blazor .NET（三）组件

翻译自：Study Blazor .NET，转载请注明。

关于组件

blazor中组件的基础结构可以分为以下3部分，

//Counter.razor
//Directives section
@page "/counter"

//Razor HTML section
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

//Function sections
@functions {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

指示部分

组件中的指示部分用来配置当前组件的路由，导入外部类库或者依赖注入，

• 路由- @page
• 依赖注入- @inject
• 导入类库 - @using

Razor HTML 部分

Razor HTML语法是C#和HTML的组合，这部分最终会渲染到浏览器中。

功能部分

组件功能部分包含用户操作函数（事件方法），局部变量，和父子组件之间传递的属性。

特性和参数

让我们了解一般SPA的基本术语,

<button id="btnClickMe" class="btn btn-primary" 
onclick="@IncrementCount">Click me</button>

这里button元素的中的id，class和onclick叫做HTML特性。

组件的定义方式和HTML元素类似，

//ParentComponent.razor
//Parent Component
@page "/ParentComponent"
<ChildComponent Title="Title from Parent">
</ChildComponent>

在这里，子组件放置在父组件中，标题是组件的特性。

//Child Component
<div>
    <p>Title from Parent Component : @Title</p>
</div>
@functions {
    [Parameter]
    private string Title { get; set; }
}

在这里，子组件的Title特性与子组件功能块部分中用[Parameter] 修饰的属性相匹配。