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

news2025/3/26 12:26:22

在我们从父组件传参数给子组件时,可以通过子组件定义的[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; }
}

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2300149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

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

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

H5应用抓包及调试技巧

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

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

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

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;也是目前室内外测…

React入门 - 0.React简介

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

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…

mybatis 入门案例

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

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…

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

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

如何用ClassFinal加密JAR保护知识产权!

0.前言 凌晨三点的办公室&#xff0c;咖啡杯底凝着褐色的残渍&#xff0c;键盘上跳跃的手指突然停滞。张工程师盯着屏幕上的反编译窗口&#xff0c;自己耗时三个月开发的规则引擎此刻像被解剖的标本般赤裸裸摊开——这正是上周交付给客户的jar包。当.class文件以伪代码形式暴露…

轨迹优化 | 基于LBFGS优化器的无约束路径平滑(附ROS C++仿真)

目录 0 专栏介绍1 LBFGS优化器1.1 拟牛顿法框架1.2 LBFGS-Lite库 2 基于LBFGS的轨迹优化3 ROS C仿真 0 专栏介绍 &#x1f525;课设、毕设、创新竞赛必备&#xff01;&#x1f525;本专栏涉及更高阶的运动规划算法轨迹优化实战&#xff0c;包括&#xff1a;曲线生成、碰撞检测…

Vue2到Vue3:无痛升级之路

为什么要从 Vue2 升级到 Vue3 Vue 3 带来了众多令人瞩目的改进和新特性&#xff0c;这些优势使得升级到 Vue 3 对项目的长期发展具有重要意义。 性能显著提升&#xff1a;Vue 3 采用了基于 Proxy 的响应式系统&#xff0c;相比 Vue 2 使用的 Object.defineProperty&#xff0c…

第28篇 基于ARM A9处理器用C语言实现中断<四>

Q&#xff1a;可以改变上一期实验工程里红色LED计数的速率吗&#xff1f; A&#xff1a;在按键中断服务程序中使HPS Timer 0停止计数&#xff0c;修改定时器中使用的预设计数值&#xff0c;然后重启定时器&#xff1b;所有的修改都是在按键中断服务程序中完成。主程序和其他…

时间序列分析(四)——差分运算、延迟算子、AR(p)模型

此前篇章&#xff1a; 时间序列分析&#xff08;一&#xff09;——基础概念篇 时间序列分析&#xff08;二&#xff09;——平稳性检验 时间序列分析&#xff08;三&#xff09;——白噪声检验 一、差分运算 差分运算的定义&#xff1a;差分运算是一种将非平稳时间序列转换…