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而不是字符串，当你重命名的话很有用！）

到此这篇关于Blazor实现组件嵌套传递值的示例详解的文章就介绍到这了,更多相关Blazor组件嵌套传递值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一文教你在现有Vue项目中嵌入Blazor项目

    目录 准备流程 Vue 项目创建流程 Blazor项目创建流程 运行效果 准备流程 Vue 项目创建流程 1.使用Vue创建一个Demo项目 全部选择默认No即可 然后项目名称就用demo了 npm init vue@latest cd demo npm i 安装完成依赖,在项目的根目录找到index.html 添加以下代码即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

  • Maui Blazor 使用摄像头实现代码

    由于Maui Blazor中界面是由WebView渲染,所以再使用Android的摄像头时无法去获取,因为原生的摄像头需要绑定界面组件所以我找到了其他的实现方式,通过WebView使用js调用设备摄像头 支持多平台兼容目前测试了Android 和PC 由于没有ioc和mac无法测试 大概率是兼容可能需要动态申请权限 1. 添加js方法 我们再wwwroot中创建一个helper.js的文件并且添加以下俩个js函数再index.html中添加<script src="helper.js&qu

  • 教你如何实现在react项目中嵌入Blazor

    目录 如何实现在react现有项目中嵌入Blazor? 首先流程 如何实现在react现有项目中嵌入Blazor? 目前官方只提供了angular和react俩种示例所以本教程只讲react教程 思路讲解: 首先在现有react项目中我们可能某些组件是在Blazor中完成,但是我们没办法找到怎么在react中轻量级使用blazor组件,可能会有人会使用iframe去加载Blazor项目,但是我不太喜欢这种方式,所以今天问了很多大佬,有大佬说可以直接在react使用Blazor组件的方式,并且找到

  • Blazor实现微信的Tab切换功能

    是否有小伙伴在使用tab的时候想进行滑动切换Tab? 并且有滑动左出左进,右出右进的效果 ,本文将讲解怎么在Blazor中去通过滑动切换Tab 本文中的UI组件使用的是MASA Blazor,您也可以是其他的UI框架,这个并不影响实际的运行效果,本文案例是兼容PC和Android的,演示效果是android中执行的,在PC中执行效果依然有效(亲测) 首先安装MASA Blazor 根据 MASA Blazor安装MASA Blazor 准备工作 创建 AppBar.razor文件 修改MainL

  • Blazor实现组件嵌套传递值的示例详解

    实现创建一个Blazor Server空的应用程序 创建一个Tab.razor 并且添加以下代码 <div> @Title </div> @code { [CascadingParameter] public string? Title { get; set; } } 修改Index.razor组件代码 @page "/" <CascadingValue Value="Title"> <Tab/> </Casca

  • Vue3之元素和组件的动画切换实现示例详解

    目录 前言 实例解析 元素间的动画切换 组件间的动画切换 总结 前言 当我们使用某个软件或者网站完成一些交互的时候,会发现做得很好的网站和软件都少不了动画的润色,完成的功能都是从一个界面跳转到另一个界面,但是加动画和不加动画完全是两种不同的体验,而且动画还可以遮住一些缺陷,比如相机预览从16:9切换到4:3时会出现黑边的情况,这时加一个转场动画,用户就不会看到这个黑边了,同样在网站开发中如果说加载的另一个页面网络不太好时,我们可以使用一个加载动画,让用户感觉当前系统仍然正常.不会出现“卡死”的假

  • vue组件生命周期钩子使用示例详解

    vue组件生命周期钩子使用示例详解

    目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的

  • react 组件实现无缝轮播示例详解

    react 组件实现无缝轮播示例详解

    目录 正文 无缝轮播 实现思路 构思使用时代码结构 Carousel组件 CarouselItem组件 完善组件 完成小圆点 正文 需求是做一个无缝轮播图,我说这不是有很多现成的轮子吗?后来了解到他有一个特殊的需求,他要求小圆点需要在轮播图外面,因为现在大部分插件都是将小圆点写在轮播图内部的,这对于不了解插件内部结构的小伙伴确实不知道如何修改. 很久没有写插件的我准备写一个插件(react) 无缝轮播 无缝轮播从最后一张到第一张的过程中不会原路返回,它就像轮子似的,从结束到开始是无缝连接的,非常

  • TypeScript类型级别和值级别示例详解

    目录 对值级别编程类型级别编程区分 类型级编程 挑战是如何工作的 挑战 对值级别编程类型级别编程区分 首先,让我们对值级别编程和类型级别编程进行重要区分. 值级别编程让我们编写将在生产中运行的代码即运行期,并为我们的用户提供有用的东西. 类型级别编程帮助我们确保代码在发布之前即编译期不包含错误,在运行期会被完全删除 JavaScript没有类型,所以所有JavaScript都是值级别的代码: // A simple Javascript function: function sum(a, b)

  • 使用VitePress搭建及部署vue组件库文档的示例详解

    使用VitePress搭建及部署vue组件库文档的示例详解

    目录 安装vitepress 目录结构 文档首页 配置 导航栏配置 侧边栏 部署到GitHub Pages 每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单.当然部署也不需要你有自己的服务器,你只要有github即可.由于我们的组件库还没有完成,所以下面就以element-plus作为示例来搭建一个文档吧. 安装vitep

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    目录 1 packages 目录 1.1 foo 目录 1.2 yyg-demo-ui 目录 2 实现 foo 示例组件 2.1 初始化 package.json 2.2 初始化 foo 目录结构 2.3 定义 foo 组件的 props 2.4 实现 foo 组件 2.5 定义 foo 组件入口文件 3 实现 yyg-demo-ui 3.1 初始化 package.json 3.2 安装依赖 3.3 定义入口文件 前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.

  • Python函数中参数是传递值还是引用详解

    Python函数中参数是传递值还是引用详解

    在 C/C++ 中,传值和传引用是函数参数传递的两种方式,在Python中参数是如何传递的?回答这个问题前,不如先来看两段代码. 代码段1: def foo(arg): arg = 2 print(arg) a = 1 foo(a) # 输出:2 print(a) # 输出:1 看了代码段1的同学可能会说参数是值传递. 代码段2: def bar(args): args.append(1) b = [] print(b)# 输出:[] print(id(b)) # 输出:4324106952 b

  • spring MVC中传递对象参数示例详解

    前言 初学java,由于项目紧急,来不及仔细的研究,在传递参数时就老老实实的一个一个的采用@RequestParam注解方式传递,最近认真看了一下,发现java也具有类似Asp.net Mvc传递对象做参数的方式,即采用@ModelAttribute注解的方式,接收方式如下: @RequestMapping("hello") public String Hello(@ModelAttribute("user") User user) { System.out.pri

随机推荐