Blazor嵌套传递
实现创建一个Blazor Server空的应用程序
创建一个Tab.razor
并且添加以下代码
<div>
@Title
</div>
@code {
[CascadingParameter]
public string? Title { get; set; }
}
修改Index.razor
组件代码
@page "/"
<CascadingValue Value="Title">
<Tab/>
</CascadingValue>
@code{
private string Title = "Index";
}
然后运行程序 效果如图
这里是一个简单的组件传值。但是在使用复杂的传值时是无法使用的
先展示一个错误的用法
修改Tab.razor
的代码
<div>
@Title
</div>
<h1>分界线</h1>
<div>
@Data
</div>
@code {
[CascadingParameter]
public string? Title { get; set; }
[CascadingParameter]
public string? Data { get; set; }
}
并且修改index.razor
代码
@page "/"
<CascadingValue Value="Title">
<CascadingValue Value="Data">
<Tab />
</CascadingValue>
</CascadingValue>
@code{
private string Title = "标题";
private string Data = "Data数据展示";
}
运行效果如图,我们看到运行的数据似乎混乱,这就是多个传递的时候出现的问题,如何解决呢?我们继续看下面
我们继续来到Tab.razor
修改相关代码 ,我们发现他们的区别就是在CascadingParameter
参数中添加唯一名称
<div>
@Title
</div>
<h1>分界线</h1>
<div>
@Data
</div>
@code {
[CascadingParameter(Name = nameof(Title))]
public string? Title { get; set; }
[CascadingParameter(Name = nameof(Name))]
public string? Data { get; set; }
}
然后来到Index.razor
修改相关代码
@page "/"
<CascadingValue Value="Title" Name="@nameof(Title)">
<CascadingValue Value="Data" Name="@nameof(Data)">
<Tab />
</CascadingValue>
</CascadingValue>
@code{
private string Title = "标题";
private string Data = "Data数据展示";
}
通过Name绑定到指定的箱套参数,这样就保证了数据不会乱的问题,如果存在多个参数需要箱套传递的话请使用类而不是但个参数,原因就是单个参数需要一个一个去传递并且指定Name,并且更容易维护,(可能有人问为什么用nameo而不是字符串,当你重命名的话很有用!)
来自token的分享
Blazor技术交流群:452761192
Blazor嵌套传递的更多相关文章
- mybatis父查询值嵌套传递/column传入多个参数值
mybatis中collection的column传入多个参数值(使用父查询的映射值) property description column 数据库的列名或者列标签别名.与传递给resultSet. ...
- python基础-装饰器,生成器和迭代器
学习内容 1.装饰器 2.生成器 3.迭代器 4.软件目录结构规范 一:装饰器(decorator) 1.装饰器定义:本质就是函数,用来装饰其他函数,即为其他函数添加附加功能. 2.装饰器原则:1)不 ...
- angular学习笔记(十二)-控制器
本篇主要介绍控制器: 控制器在前面的例子中已经大量的用到,它的作用主要是: 控制某块视图,通过$scope向这块视图提供数据,函数,并且监视需要被检测的部分,当发生变化时,做出相应的动作,从而起到控制 ...
- 11. Go 语言网络编程
Go 语言网络编程 Go语言在编写 web 应用方面非常得力.因为目前它还没有 GUI(Graphic User Interface 图形化用户界面)的框架,通过文本或者模板展现的 html 界面是目 ...
- Vue(学习第三部 自动化工具 [vue-cli])
目录 Vue自动化工具(Vue-cli) 安装nide.js npm 安装Vue-sli 使用Vue-处理初始化创建起那段项目 vue项目执行流程图 单文件组件的使用 template 编写HTML代 ...
- Vue2-组件通讯传值
Vue2组件通讯传值 方法 Slot插槽--父向子内容分发,子组件只读 mixin混入--定义公共变量或方法,mixin数据不共享,组件中mixin实例互不影响 provide+inject--依赖注 ...
- vue嵌套路由--params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...
- vue嵌套路由-query传递参数(三)
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- Blazor和Vue对比学习(基础1.7):传递UI片断,slot和RenderFragment
组件开发模式,带来了复用.灵活.性能等优势,但也增加了组件之间数据传递的繁杂.不像传统的页面开发模式,一个ViewModel搞定整个页面数据. 组件之间的数据传递,是学习组件开发,必须要攻克的难关.这 ...
随机推荐
- SpringCloud(六) - RabbitMQ安装,三种消息发送模式,消息发送确认,消息消费确认(自动,手动)
1.安装erlang语言环境 1.1 创建 erlang安装目录 mkdir erlang 1.2 上传解压压缩包 上传到: /root/ 解压缩# tar -zxvf otp_src_22.0.ta ...
- Day09:switch——case结构的使用详解
switch--case结构的使用详解 什么是switch--case结构 他也是一种多选择结构 switch--case结构是类于if--else的语法,通过比较而输出对应的内容: 通俗的讲,好比我 ...
- JavaScript 实现地图搜索功能
需求:输入框输入地址点击查询,查询结果在地图定位到查询位置,显示查询位置的经纬度 <html xmlns="http://www.w3.org/1999/xhtml"> ...
- AIR32F103(六) ADC,I2S,DMA和ADPCM实现录音播放功能
目录 AIR32F103(一) 合宙AIR32F103CBT6开发板上手报告 AIR32F103(二) Linux环境和LibOpenCM3项目模板 AIR32F103(三) Linux环境基于标准外 ...
- JDK中内嵌JS引擎介绍及使用
原文: JDK中内嵌JS引擎介绍及使用 - Stars-One的杂货小窝 最近研究阅读这个APP,其主要功能就是通过一个个书源,从而实现移动端阅读的体验 比如说某些在线小说阅读网站,会加上相应的广告, ...
- 3.5:基于Python的KNN算法简单实现
〇.目标 1.使用pycharm工具创建项目demo: 2.使用python语言实现KNN算法. 一.创建脚本文件 二.编写KNN算法程序 KNN算法所阐述的核心思想在KNN.py文件的注释部分具有详 ...
- 【消息队列面试】11-14:kafka高可靠、高吞吐量、消息丢失、消费模式
十一.kafka消息高可靠的解决方案 1.高可靠=避免消息丢失 解决消息丢失的问题 2.如何解决 (1)保证消息发送是可靠的(发成功了/落到partition) a.ack参数 发送端,采用ack机制 ...
- 使用pandas处理数据和matplotlib生成可视化图表
一.缘由 上一篇输入关键词"口红",将淘宝中的的相关商品信息全部爬取了下拉,并且以CSV的文件格式储存.我们拿到数据之后,那么就需要对数据进行处理.只是将爬取到的数据以更直观的方式 ...
- mysql报错:【系统出错。发生系统错误 1067。进程意外终止。】解决
目录 问题描述 错误排查 1.检查3306端口是否被占用 2.使用window事件查看器 总结 问题描述 使用管理员cmd,任务管理器均无法启动mysql. 报错提示信息:系统出错.发生系统错误 10 ...
- SQL语句查询关键字
SQL语句查询关键字前戏 SQL语句中关键字的执行顺序和编写顺序并不是一致的,可能会错乱 eg: select id,name from userinfo;我们先写的select再写的from,但是执 ...