当前位置: 首页 > article >正文

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

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

<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; }
}

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

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<ParameterChild class="123" x1 ="2"></ParameterChild>@code {}

运行结果:
在这里插入图片描述

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

参数设置顺序

@attributes 特性在应用字典中的任意参数时,是从右向左进行设置的。
下面我们还是用一段代码示例看看是怎么处理的
子组件:

<h3>ParameterChild</h3>
<div @attributes=Parameters x1="200"></div>
<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; }
}

父组件:

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<ParameterChild class="123" x1 ="2"></ParameterChild>@code {}

我们在子组件和父组件中都为div赋值了x1属性,<div @attributes=Parameters x1=“200”>,根据参数设置的顺序,x1="200"在右侧,优先进行了设置,我们来看看运行的结果是否和我们预期的一致
运行结果:
在这里插入图片描述

运行的结果和我们的预期是完全一致的,如果调整<div @attributes=Parameters x1=“200”>中x1和 @attributes的顺序,结果应该是赋值x1=2
我们调换顺序做一次尝试
修改后的子组件如下:

<h3>ParameterChild</h3>
<div x1="200" @attributes=Parameters></div>
<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; }
}

我们运行下看看结果
在这里插入图片描述

结果和我们预期一样,发生了变化

相关文章:

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

在我们从父组件传参数给子组件时&#xff0c;可以通过子组件定义的[Parameter]特性的公开属性进行传值&#xff0c;但是当我们需要传递多个值的时候&#xff0c;就需要通过[Parameter]特性定义多个属性&#xff0c;有没有更简便的方式&#xff1f; 我们可以使用定义 IDictionar…...

【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能

前言 vue-element-admin-plus对于复杂业务的支持程度确实不怎么样&#xff0c;我这里就遇到了编辑页面中还要嵌套列表的真实案例&#xff0c;比如字典&#xff0c;主字典嵌套子信息&#xff0c;类似于一个树状结构。目前vue-element-admin-plus给出的例子是无法满足这个需求的…...

【深度学习】计算机视觉(CV)-目标检测-DETR(DEtection TRansformer)—— 基于 Transformer 的端到端目标检测

1.什么是 DETR&#xff1f; DETR&#xff08;DEtection TRansformer&#xff09; 是 Facebook AI&#xff08;FAIR&#xff09;于 2020 年提出的 端到端目标检测算法&#xff0c;它基于 Transformer 架构&#xff0c;消除了 Faster R-CNN、YOLO 等方法中的 候选框&#xff08;…...

DeepSeek教unity------MessagePack-02

内置支持类型&#xff1a; 对象序列化 MessagePack for C# 可以序列化你自己定义的公共类或结构体类型。默认情况下&#xff0c;可序列化的类型必须用 [MessagePackObject] 属性进行注解&#xff0c;成员需要用 [Key] 属性进行注解。键可以是索引&#xff08;整数&#xff09;…...

【达梦数据库】disql工具参数绑定

前言 在达梦数据库的使用过程中尽管管理工具很好用&#xff0c;但是命令行工具还是有着得天独厚的优势&#xff0c;但是在参数绑定方面就没有管理工具做的更加完美&#xff0c;现在就汇总下disql 工具参数绑定的常用几种方式 disql 参数绑定 使用 ? select * from v$dm_in…...

H5应用抓包及调试技巧

由于图片和格式解析问题&#xff0c;可前往 阅读原文 在现代移动互联网时代&#xff0c;H5 应用以其跨平台、轻量化、快速迭代的特性&#xff0c;成为移动开发的重要一环。然而&#xff0c;随着功能的复杂化和用户体验要求的提升&#xff0c;H5应用的调试也面临着诸多挑战&…...

Django后台新建管理员

在 Django 中&#xff0c;新建管理员用户通常涉及使用 Django 自带的命令行工具 manage.py。以下是具体步骤&#xff1a; 前提条件 Django 项目已创建&#xff1a;确保你已经创建了一个 Django 项目和应用。数据库已迁移&#xff1a;确保你已经运行了 python manage.py migra…...

输入网址到网页显示,发生了什么?

从今天起&#xff0c;我准备在网上输出自己的八股了 浏览器解析URL&#xff1a; 根据URL解析 请求协议&#xff08;http&#xff09;&#xff0c;请求的服务器&#xff08;www.baidu.com&#xff09;&#xff0c;请求的文件路径&#xff08;可以省略&#xff09;&#xff0c;解…...

Coredump-N:sprintf写越界

最近遇到一个sanitizer检查出来的问题; unsigned long abc = 0xffffffffffffffff; char link[8] = {0}; sprintf(link, "%u", abc);这段代码存在潜在问题。 数据类型不匹配: abc 是一个 unsigned long 类型...

自学Java-面向对象高级(final、单例类、枚举类、抽象类、接口)

自学Java-面向对象高级&#xff08;final、单例类、枚举类、抽象类、接口&#xff09; 一、final关键字1、认识final关键字2、final修饰变量的注意3、常量 二、单例类&#xff08;设计模式&#xff09;1、设计模式的概念2、单例设计模式3、单例类有很多形式4、懒汉式单例类5、小…...

[LeetCode力扣hot100]-二叉树相关手撕题

简单 94.中序遍历 就说左子树-根-右子树顺序&#xff0c;之前也有二叉树相关的文章&#xff0c;基本上递归为主&#xff0c;这里用栈等方式实现下。 用到&#xff1a;栈 注意上面给出节点的基本结构&#xff0c;如左右&#xff0c;val指等 /*** Definition for a binary t…...

docker下部署kong+consul+konga 报错问题处理

前言&#xff1a; 由于在docker下部署一些项目比较特殊&#xff0c;特别是网络这一块&#xff0c;如果没有搞清楚&#xff0c;是很容易出问题的。 先上docker-compose 编排 这里的docker-compose for kong可以在 kong-compose 获取代码 version: 3.9x-kong-config:&kong…...

网络优化工作流程

DT路测 移动测试&#xff08;Drive Test&#xff09; CQT 定点测试&#xff08;通信质量测试&#xff09; DT 测试不能体现实际话务质量&#xff1a;回音、串音等网络问题不能通过 DT 测试发现&#xff0c;因此 CQT 拨打测试是 DT 测试很好的补充&#xff0c;也是目前室内外测…...

[题解]2024CCPC重庆站-小 C 的神秘图形

Sources&#xff1a;K - 小 C 的神秘图形Abstract&#xff1a;给定正整数 n ( 1 ≤ n ≤ 1 0 5 ) n(1\le n\le 10^5) n(1≤n≤105)&#xff0c;三进制字符串 n 1 , n 2 ( ∣ n 1 ∣ ∣ n 2 ∣ n ) n_1,n_2(|n_1||n_2|n) n1​,n2​(∣n1​∣∣n2​∣n)&#xff0c;按如下方法…...

React入门 - 0.React简介

React入门 - React简介 A Brief Introduction to React By JacksonML 1. 关于React React是一个知名的Web框架。众所周知&#xff0c;jQuery, Angular, Vue等框架都曾闪亮登场&#xff0c;并且&#xff0c;都仍然在全球市场占有一席之地。React这个颇有担当的新锐&#xff0…...

hive全量迁移脚本

#!/bin/bash #场景&#xff1a;数据在同一库下&#xff0c;并且hive是内部表&#xff08;前缀的hdfs地址是相同的&#xff09;#1.读取一个文件&#xff0c;获取表名#echo "时间$dt_jian_2-------------------------" >> /home/hadoop/qianyi_zengliang/rs.txt#…...

SpringCloud系列教程:微服务的未来(二十四)Direct交换机、Topic交换机、声明队列交换机

前言 在现代消息队列系统中&#xff0c;交换机是实现消息传递和路由的核心组件。本文将重点探讨三种常见的交换机类型&#xff1a;Direct交换机、Topic交换机和声明队列交换机。通过对这三种交换机的详细分析&#xff0c;我们将学习它们的工作原理、应用场景以及如何在实际项目…...

Sojson高级加密技术科普

1. 引言 什么是Sojson&#xff1f; Sojson是一款用于JavaScript代码加密与混淆的工具&#xff0c;它能够有效保护前端代码的知识产权&#xff0c;避免开发者的心血被随意窃取。 为什么需要代码加密&#xff1f; 在当今的互联网环境下&#xff0c;代码被轻易复制、篡改或逆向…...

mysql多主集群 galera cluster for mysql 8安装配置启动重启集群

[TOC] 一、安装mysql 1、安装 系统环境&#xff1a; Ubuntu 18.04 64位 MySQL 8.0.19 下载MySQL APT安装配置包 首先访问 https://dev.mysql.com/downloads/repo/apt/ 获取配置包下载地址 wget https://dev.mysql.com/get/mysql-apt-config_0.8.14-1_all.deb sudo dpkg -i mysq…...

gitte远程仓库修改后,本地没有更新,本地与远程仓库不一致

问题 &#xff1a;gitte远程仓库修改后&#xff0c;本地没有更新&#xff0c;本地与远程仓库不一致 现象&#xff1a; [cxqiZwz9fjj2ssnshikw14avaZ rpc]$ git push Username for https://gitee.com: beihangya Password for https://beihangyagitee.com: To https://gitee.c…...

个人搭建CDN加速服务 特网科技

在互联网快速发展的今天&#xff0c;网站的加载速度对用户体验有着至关重要的影响&#xff0c;传统的网页加载方式依赖于服务器的性能和网络环境&#xff0c;这使得某些网站的页面加载时间过长&#xff0c;用户体验不佳&#xff0c;为了解决这个问题&#xff0c;许多企业开始采…...

mybatis 入门案例

前言 我们清楚 mybatis 是一个持久层框架&#xff0c;可以非常便捷的操作数据库。如最常见的对数据进行增删改查操作。 项目准备 1 在mybatis 数据库 创建 user 用户表 并插入以下两条数据 以下是一个user.sql 脚本文件如何使用 脚本文件可以参照MySQL数据库的备份与还原_控…...

Spring Boot最新技术特性深度解析与实战应用

一、反应式编程:WebFlux与非阻塞架构 1.1 核心价值与场景 Spring Boot 2.x全面拥抱反应式编程模型,通过Spring WebFlux支持异步非阻塞的请求处理,适用于高并发、低延迟的微服务场景(如实时通信、物联网数据处理)。其基于Reactor库实现,采用事件循环模型,显著提升资源利…...

Python使用Flask结合DeepSeek开发

一、背景 我之前关于DeepSeek使用ollama部署的文章大家可以把DeepSeek大模型部署起来。那么ollama还提供了可以调用对应部署模型的API接口。我们可以基于这些接口&#xff0c;做自己的二次开发。使用pythonflaskollama就可以进行模型对话调用。并且前端采用SSE的技术&#xff0…...

前端常见面试题-2025

vue4.0 Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本&#xff0c;引入了许多新特性和改进&#xff0c;旨在提升开发者的体验和性能。以下是一些关键的更新和新特性&#xff1a; Composition API 重构&#xff1a;Vue 3 引入了 Composition API 作为…...

大模型开发实战篇7:语音识别-语音转文字

语音识别大模型&#xff0c;是人工智能领域的一项重要技术&#xff0c;它能够将人类的语音转换为文本。近年来&#xff0c;随着深度学习技术的不断发展&#xff0c;语音识别大模型取得了显著的进展&#xff0c;并在各个领域得到了广泛应用。 主流语音识别大模型 目前&#xf…...

基于JAVA开发APISIX插件实战(1)-开发、部署、调试

我这篇APISIX-JAVA插件实战开编讲述初级工程师才会关心的开发部署调试,主要是因为APISIX-JAVA插件从前文基于JAVA开发APISIX插件-CSDN博客中我们可以了解到,它是通过unix的sock进行RPC的通信的,因此无法生成sock的windows环境是无法进行开发的。 如果使用Mac那么会怎么样?…...

QML 部件获得焦点触发的全局槽函数 onActiveFocusItemChanged

在qml的window窗口中&#xff0c;假如添加里许多其他部件&#xff0c;当这些部件改变时&#xff0c;会有一个全局部件焦点改变槽函数触发&#xff0c;就是 onActiveFocusItemChanged 可以通过此槽函数就可以知道当前焦点在哪一个部件上&#xff0c;也可以做一些自动化测试等&…...

DeepSeek 部署中的常见问题及解决方案:Mac 场景实践指南

DeepSeek 部署中的常见问题及解决方案&#xff1a;Mac 场景实践指南 随着大模型技术的快速发展&#xff0c;DeepSeek 作为开源领域的优秀代表&#xff0c;在本地化部署过程中常会遇到各类技术挑战。本文基于实际部署经验&#xff0c;梳理了五大高频问题及对应解决方案&#xf…...

OlympicArena 论文简介

近年来&#xff0c;大型语言模型&#xff08;LLMs&#xff09;和大型多模态模型&#xff08;LMMs&#xff09;的飞速发展&#xff0c;让AI逐渐展现出接近人类水平的认知推理能力。然而&#xff0c;如何科学评估AI在复杂问题解决中的真实水平&#xff0c;一直是学术界和产业界的…...