Blazor Server组件入门

最新推荐文章于 2023-06-27 15:45:23 发布

程序猿想成程序狮

最新推荐文章于 2023-06-27 15:45:23 发布

阅读量770

点赞数

分类专栏： ASP.NET Core 文章标签： c# 组件化

本文链接：https://blog.csdn.net/m0_47659279/article/details/118609796

版权

3 篇文章 1 订阅

订阅专栏

一、组件是什么？

组件（Component）是对数据和方法的简单封装。通俗的讲，我们可以把一个网页比作一个玩具，而组件就相当于玩具的零件。复杂的组件又可以由简单的组件组合而成。组件提高了代码的复用性，合理的设计组件还可以降低耦合。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<h3>MyComponent</h3>

@code {

}

在这里插入图片描述

在需要使用组件的.razor页面中通过标签的形式使用组件
例如：在Pages文件夹下的Index.razor中使用组件
在这里插入图片描述
修改Index.razor文件的代码为：

@page "/"

@using Blazor_Server组件.Components @*引入命名空间(@using 项目名.Components)*@

<h1>Hello Component</h1>
<MyComponent></MyComponent> @*使用组件*@

在这里插入图片描述

在这里插入图片描述
发现组件中的内容MyComponent被引入了进来

很多时候我们需要给组件传递参数，这时我们可以修改组件MyComponent的代码

<h3>MyComponent</h3>
<div>@MyProperty</div>

@code {
    [Parameter]
    public string MyProperty { get; set; }
}

这段代码的意思是组件需要接收一个参数MyProperty并在组件中渲染参数的值

我们再修改页面Index.razor中的代码向组件中传递参数

@page "/"

@using Blazor_Server组件.Components @*引入命名空间*@

<h1>Hello Component</h1>
<MyComponent MyProperty="我是传入的参数"></MyComponent> @*使用组件并传递参数*@

保存所有的修改后刷新网页查看效果
在这里插入图片描述

此篇文章只对新手做一个简单的入门，想了解关于组件的更多内容请自行查阅文档

关注