【Blazor】Blazor学习笔记

  1. 布局

如何创建布局,也就是页面的模板

@inherits LayoutComponentBase

必须继承LayoutComponentBase

当然也可以在其他的布局的基础之上,嵌入自己的自定义布局形成新的布局

@layout 其他布局

====

@inherits LayoutComponentBase->布局基类

@layout MainLayout->其他的布局

@Body

====

如何选择布局应用的范围

  1. 针对个体

在razor文件开头就写

@layout 某某布局

  1. 针对范围

利用_Imports.razor,在指定文件夹下的所有布局都会按照_Imports.razor来处理

  1. 组件

如何创建一个组件

前端+C#

注意组件前面要加@rendermode InteractiveServer

因为组件是需要交互的

如何单向绑定

需要绑定的对象在C#代码区加Parameter,并且public,前端区@变量名访问

仅仅是C#->前端的数据流向

如何访问DOM

@onxxxx,就可以访问html组件的DOM事件了,之后可以@与C#区域联动,或者直接上lambda表达式

访问某些事件是具备属性的,@onxxxx:yyyy,输入:可以弹出事件的一些属性来,相当于进一步细化事件的使用。

如何双向绑定

就是实现数据在前端区域和C#区域双向传递

@* @bind 和 @bind-value 的区别 *@

@* 特性 @bind @bind-value *@

@* 语法简洁性 更简洁,适合大多数场景 更显式,适合复杂场景 *@

@* 默认绑定属性 自动绑定到 value 属性 显式绑定到 value 属性 *@

@* 默认事件 默认绑定到 onchange 事件 需要显式指定事件(如 oninput) *@

@* 适用场景 普通 HTML 元素或简单组件 自定义组件或需要显式控制的场景 *@

@* 灵活性 较低,适合简单绑定 较高,适合需要精细控制的场景 *@

废话不多说,直接看总结,就是看使用场景是简单还是复杂

如何解决父组件,子组件的参数传递

级联访问指令

  1. 可以按照"名字"进行索引,这个CascadingValue范围内的对象都可以通过"级联访问名索引"

需要多个不同的级联索引,就套娃多写几层

在父组件

<CascadingValue Value="@C#区域变量名" Name="级联访问识别名">

@* 希望进行级联索引的子组件 *@

</CascadingValue>

在子组件的C#区域,通过CascadingParameter(Name = "级联访问识别名")来提取父组件传递进来的信息,然后再通过@标记传到子组件的前端区域

  1. 可以按照类型进行索引,也是类似于名字索引

在父组件

<CascadingValue Value="@C#区域变量名" >

@* 希望进行级联索引的子组件 *@

</CascadingValue>

其实就是不用写那个Name了,框架自动根据C#变量区域的类型推断,方便不用名字

在子组件的C#区域CascadingParameter提取就完了,省事

  1. 级联传递时的值覆写问题

框架在按照名字进行索引的时候,会出现级联传递的名字一样的情况,这种情况下就会发生在传递过程中的覆写问题,框架并不禁止这种行为,可以在过程中组件将上一级传递的值修改,然后再往下传递。

相关推荐
在世修行11 分钟前
从零打造 C# 工业视觉检测系统(六):OpenCV 图像处理与像素级比例尺标定
opencv·c#·视觉检测
paopaokaka_luck10 小时前
基于springboot3+vue3的企业考勤管理系统(部门树递归、Echarts图形化分析)
开发语言·spring boot·学习·echarts·mybatis·需求分析·代码规范
minglie110 小时前
zynq高频小数据量PS闭环 抖动时间的测量
学习
V哥AI增长10 小时前
小红书笔记在生成式AI引擎中的可见性机制解析:从抓取原理到GEO工程化实践
大数据·人工智能·笔记
long31610 小时前
MySQL 学习练习(配套 01 入门资料)
数据库·学习·mysql
小金子会发光10 小时前
C# WinForms 手搓 Modbus RTU 调试助手:不依赖第三方 Modbus 库,从 CRC16 到 8 种功能码完整实现
c#·modbusrtu·串口通讯
梦雨生生11 小时前
java开发工具(学习第一天)
java·开发语言·学习
上海安当技术14 小时前
C/S 桌面软件怎么接 UKey 强认证?C# SDK 与 C 动态库集成 WinForms/Qt/工控实战
c语言·qt·c#
Hotchip_MEMS14 小时前
当雾化器遇上MEMS:一场从交互到制造的全链路效率提升
人工智能·笔记·物联网·电脑·制造
是上好佳佳佳呀15 小时前
【深度学习|Day02】PyTorch 深度学习笔记(下):张量运算与自动微分
pytorch·笔记·深度学习