Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Blazor-父子组件传递任意参数

Blazor-父子组件传递任意参数

作者头像
MaybeHC
发布于 2025-02-18 03:01:33
发布于 2025-02-18 03:01:33
9300
代码可运行
举报
文章被收录于专栏:技术之路技术之路
运行总次数:0
代码可运行

在我们从父组件传参数给子组件时,可以通过子组件定义的[Parameter]特性的公开属性进行传值,但是当我们需要传递多个值的时候,就需要通过[Parameter]特性定义多个属性,有没有更简便的方式? 我们可以使用定义 IDictionary<string,object>类型的参数,并使用[Parameter(CaptureUnmatchedValues =true)]特性进行标注,这样在父组件中嵌套子组件时,可以任意的传递参数。 子组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<h3>ParameterChild</h3>
<ul>
    @if (Parameters != null)
    {
        @foreach (var item in Parameters)
        {
            <li>key=@item.Key,value=@item.Value</li>
        }
    }
</ul>
@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object>? Parameters { get; set; }
}

我们在子组件中将所有参数展示出来,用于验证参数是否传递成功 父组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<ParameterChild class="123" x1 ="2"></ParameterChild>

@code {
    
}

运行结果:

我们通过运行结果可以看到,参数被正确的传递到了子组件

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Blazor-父子组件回调方法
在组件中,要实现从父组件向子组件传值,可以在父组件中给参数属性赋值。想要达成这一效果,需要在子组件中使用[Parameter]特性,将属性定义为参数类型的属性。 简单来说就是以下几个步骤:
MaybeHC
2025/02/14
1330
Blazor-父子组件回调方法
Blazor入门:ASP.NET Core Razor 组件
目录 关于组件 组件类 静态资产 路由与路由参数 组件参数 请勿创建会写入其自己的组参数属性的组件 子内容 属性展开 任意参数 捕获对组件的引用 在外部调用组件方法以更新状态 使用 @ 键控制是否保留
痴者工良
2021/04/26
3K0
Blazor-父子组件传值
在子组件中可以使用[Parameter]特性将组件中的属性暴露出来,让调用方可以控制特性所标记的属性的值,在调用方可以直接传具体的值,也可以传变量,这里我们传入变量就可以完成父组件给子组件传值的操作,示例如下: 子组件:
MaybeHC
2025/02/12
1120
Blazor-父子组件传值
Blazor-路由模板(上)
Blazor 的路由模板是定义应用中不同页面或组件访问路径的一种方式。通过路由模板,你可以管理应用程序的导航结构,支持基本路由、参数路由、子路由和区域路由等功能。 我们为访问组件使用@page 指令指定路由 URL
MaybeHC
2025/03/06
480
Blazor-路由模板(上)
Blazor-事件参数
在Blazor 项目中,微软对事件的事件参数进行了封装,所有的事件参数类都必须继承 EventArgs 基类。 如我们不清楚当前的方法封装的事件到底是什么类型的?我们可以使用EventArgs来接收参数,之后断点查看下EventArgs的子类类型,这样就可以判断出来事件的类型。
MaybeHC
2025/02/13
1050
Blazor-事件参数
Blazor-根级别级联值
我们在Program文件中注册了三个级联值,第一个级联值为设置名称,后面两个级联值都设置了名称
MaybeHC
2025/03/04
821
Blazor-根级别级联值
Blazor-路由模板(下)
我们这里使用{id:int}限制路由,id为int类型,并且路由参数 id 对应的 Id 属性也必须是 int 类型。我们试试能否正常访问
MaybeHC
2025/03/06
550
Blazor-路由模板(下)
Blazor学习之旅(4)数据共享
在 Blazor 中,从名为“组件”的自包含代码部分生成 UI。每个组件都可以包含 HTML 和 C# 代码的混合。组件是通过使用 Razor 语法编写的,其中的代码是用 @code 指令标记的。其他指令可用于访问变量、绑定到值以及实现其他呈现任务。
Edison Zhou
2023/07/21
5320
Blazor学习之旅(4)数据共享
Blazor-处理URL中查询参数
本次主要来说下通过对当前URL进行,添加、更改或删除一个或多个查询参数的U R L 字符串的方法。
MaybeHC
2025/03/25
1170
Blazor-处理URL中查询参数
React 开发 | 父子组件间通信
父组件 -> 子组件:通过 props 传递 子组件 -> 父组件:通过 props 传递,但是父组件需要提取给子组件传递一个预定义的函数
白墨石
2022/11/21
1.3K0
silverlight/xap如何接收参数?
silverlight不能象flash一样,直接以类似xxx.xap?name=123的方式传递参数,而是要用另一种方式实现: html部分(注意高亮部分): <object data="data:
菩提树下的杨过
2018/01/23
1.1K0
Vue父子组件的通信
Prop 是你可以在组件上注册的一些自定义 attribute。 当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。
名字是乱打的
2021/12/22
1.4K0
Vue父子组件的通信
riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程【五】标签嵌套、命名元素、事件、标签条件 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 循环 可以通过each属性来达到标签循环,如下: <todo> <ul> <li each={ items } class={ completed:
liulun
2018/01/12
3.4K0
Blazor-组件路由事件
导航正在发生之前运行,导航还未发生转向,还未跳转到目标 URL,可在此方法注册的事件处理程序中进行拦截,可阻止导航或进一步转向。 在当前页面上单击链接或通过代码执行 NavigateTo()方法都可以转向目标 URL,但要注意如下事项: (1) 在独立 Blazor WebAssembly 应用程序中,通过单击链接或通过代码执行NavigateTo()方法都可以转向目标 URL,并且都会触发RegisterLocationChangingHandler()方法注册的导航事件。 (2) 在 Blazor WebApp 中,任何呈现模式的交互位置为全局的项目,通过单击链接或代码执行 NavigateTo()方法都可以转向目标 URL,并且都会触发RegisterLocationChangingHandler()方法注册的导航事件。 (3) 在 Blazor WebApp 中,任何呈现模式的交互位置为每页/组件时,单击当前页面上的链接进行转向,不会触发RegisterLocationChangingHandler()方法注册导航事件,而通过NavigateTo()方法是可以触发的。
MaybeHC
2025/03/25
1470
Blazor-组件路由事件
react实践笔记:父子组件数值双向传递
    在编写 react 组件时,经常会遇到一个场景:子组件有个状态,可以通过内部的一个按钮进行切换;而父组件也可以通过一个按钮,同步去切换子组件的状态。比如侧边栏菜单的实现:顶部导航通过点击“筛选”按钮展开侧边栏,而侧边栏自身通过点击“箭头”按钮收起侧边栏。在这种场景下,当点击“筛选”按钮时,则是父组件将改变后的状态传递给子组件;而点击“箭头”按钮时,则是子组件自身状态的变化,同时也把这个状态传递回父组件。
zww_v5
2018/12/23
4.3K0
react实践笔记:父子组件数值双向传递
react框架 新建组件以及父子组件通信
新建一个ComentList.js 文件 定义一个新的组件.png import React from "react" // 创建组件 class ComentList extends React
用户4344670
2019/12/19
7730
Vue 组件(二):父子组件通信
子组件是不能直接访问父组件中的数据的,但有时候父子组件之间需要进行数据交互,这就涉及到了父子组件通信的问题。简单来说,父组件向子组件通信是通过 props 进行的,而子组件向父组件通信则是通过自定义事件进行的。
Chor
2019/11/07
9850
Vue 组件通信的 8 种方式
[3245a3c0598b4b79b32f60649ded9cca~tplv-k3u1fbpfcp-watermark.image] 前言     做了半年的公司系统,终于就在前天上线了。后期改BUG时间拖得太长了,出现的大部分BUG 是 前端 与后端 信息不对称导致的,逻辑性错误很不多,用户体验上稍微差点,毕竟第一次做这么大的系统(100w+),通过这次系统的开发,总结了不少经验,如何更好的跟后端人员协作开发以及如何设计来提高用户体验上,之前自己做开发没关注这方面,只注重功能实现,后期的这块多补补。
程序员海军
2022/02/15
3870
Vue 组件通信的 8 种方式
Vue.js入门教程-组件数据传递
(1)组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用
WEBING
2019/03/13
1.1K0
Vue.js入门教程-组件数据传递
Vue---父子组件之间的通信
  在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。
半指温柔乐
2018/10/10
7740
相关推荐
Blazor-父子组件回调方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验