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

我們運行下看看結果
在這里插入圖片描述

結果和我們預期一樣,發生了變化

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/70183.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/70183.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/70183.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

DeepSeek 的創新融合:多行業應用實踐探索

引言 在數字化轉型的浪潮中&#xff0c;技術的融合與創新成為推動各行業發展的關鍵力量。藍耘平臺作為行業內備受矚目的創新平臺&#xff0c;以其強大的資源整合能力和靈活的架構&#xff0c;為企業提供了高效的服務支持。而 DeepSeek 憑借先進的人工智能技術&#xff0c;在自然…

STM32創建靜態庫lib

創建靜態庫lib 1. 新建工程1.1 創建工程文件夾1.2 編寫用戶相關代碼1.2.1 stm32f4xx_it.h1.2.2 stm32f4xx_it.c1.2.3 標準庫配置&#xff1a;stm32f4xx_conf.h1.2.4 HAL庫的配置&#xff1a;stm32f4xx_hal_conf.h1.2.5 LL庫配置&#xff1a;stm32f4xx_ll_conf.h 1.3 移植通用文…

elabradio入門第二講——BPSK數字調制與解調(插值、升余弦濾波、速率匹配、符號同步)

數字信號可以通過數字基帶傳輸系統進行傳輸&#xff0c;而基帶傳輸系統僅僅適用于低頻信道下的數字信號傳輸。然而&#xff0c;在實際的通信系統中信道通常具有帶通特性&#xff0c;因而需要將基帶信號搬移到適合信道傳輸的高頻載波上&#xff0c;使得信號與信道相匹配&#xf…

汽車 OTA 升級:提升下載與升級速度,優化用戶體驗

摘要&#xff1a; 隨著汽車智能化的飛速發展&#xff0c;OTA&#xff08;Over - the - Air&#xff09;升級已成為汽車行業的重要技術&#xff0c;它能為車輛持續帶來功能更新與性能優化。然而&#xff0c;下載及升級速度較慢的問題常常影響用戶體驗。本文深入探討在汽車 OTA …

【Spring+MyBatis】留言墻的實現

目錄 1. 添加依賴 2. 配置數據庫 2.1 創建數據庫與數據表 2.2 創建與數據庫對應的實體類 3. 后端代碼 3.1 目錄結構 3.2 MessageController類 3.3 MessageService類 3.4 MessageMapper接口 4. 前端代碼 5. 單元測試 5.1 后端接口測試 5.2 使用前端頁面測試 在Spri…

SQLite Select 語句詳解

SQLite Select 語句詳解 SQLite 是一個輕量級的數據庫管理系統&#xff0c;以其簡潔的設計和高效的性能被廣泛應用于各種場景。在 SQLite 中&#xff0c;SELECT 語句是用于查詢數據庫中的數據的命令。本文將詳細介紹 SQLite 的 SELECT 語句&#xff0c;包括其基本語法、常用功…

深度學習05 ResNet殘差網絡

目錄 傳統卷積神經網絡存在的問題 如何解決 批量歸一化BatchNormalization, BN 殘差連接方式 ?殘差結構 ResNet網絡 ResNet 網絡是在 2015年 由微軟實驗室中的何凱明等幾位大神提出&#xff0c;斬獲當年ImageNet競賽中分類任務第一名&#xff0c;目標檢測第一名。獲得CO…

組件庫地址

react&#xff1a; https://react-vant.3lang.dev/components/dialoghttps://react-vant.3lang.dev/components/dialog vue用v2的 Vant 2 - Mobile UI Components built on Vue

docker 進階命令(基于Ubuntu)

數據卷 Volume: 目錄映射, 目錄掛載 匿名綁定: 匿名綁定的 volume 在容器刪除的時候, 數據卷也會被刪除, 匿名綁定是不能做到持久化的, 地址一般是 /var/lib/docker/volumes/xxxxx/_data 綁定卷時修改宿主機的目錄或文件, 容器內的數據也會同步修改, 反之亦然 # 查看所有 vo…

從入門到精通:Postman 實用指南

Postman 是一款超棒的 API 開發工具&#xff0c;能用來測試、調試和管理 API&#xff0c;大大提升開發效率。下面就給大家詳細講講它的安裝、使用方法&#xff0c;再分享些實用技巧。 一、安裝 Postman 你能在 Postman 官網&#xff08;https://www.postman.com &#xff09;下…

將圖片base64編碼后,數據轉成圖片

將圖片數據進行base64編碼后&#xff0c;可以在瀏覽器上查看圖片&#xff0c;只需在前端加上data:image/png;base64,即可 在線工具&#xff1a; Base64轉圖片 - 加菲工具

【動態規劃】詳解 0-1背包問題

文章目錄 1. 問題引入2. 從 dfs 到動態規劃3. 動態規劃過程分析4. 二維 dp 的遍歷順序5. 從二維數組到一維數組6. 一維數組的遍歷次序7. 背包的遍歷順序8. 代碼總結9. 總結 1. 問題引入 0-1 背包是比較經典的動態規劃問題&#xff0c;這里以代碼隨想錄里面的例子來介紹下。總的…

LeetCode每日精進:20.有效的括號

題目鏈接&#xff1a;20.有效的括號 題目描述&#xff1a; 給定一個只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判斷字符串是否有效。 有效字符串需滿足&#xff1a; 左括號必須用相同類型的右括號閉合。左括號必須以…

llama.cpp部署 DeepSeek-R1 模型

一、llama.cpp 介紹 使用純 C/C推理 Meta 的LLaMA模型&#xff08;及其他模型&#xff09;。主要目標llama.cpp是在各種硬件&#xff08;本地和云端&#xff09;上以最少的設置和最先進的性能實現 LLM 推理。純 C/C 實現&#xff0c;無任何依賴項Apple 芯片是一流的——通過 A…

Web后端 - Maven管理工具

一 Maven簡單介紹 Maven是apache旗下的一個開源項目&#xff0c;是一款用于管理和構建java項目的工具。 Maven的作用 二 Maven 安裝配置 依賴配置 依賴傳遞 依賴范圍 生命周期 注意事項&#xff1a;在同一套生命周期中&#xff0c;當運行后面的階段時&#xff0c;前面的階段都…

[LeetCode力扣hot100]-C++常用數據結構

0.Vector 1.Set-常用滑動窗口 set<char> ans;//根據類型定義&#xff0c;像vector ans.count()//檢查某個元素是否在set里&#xff0c;1在0不在 ans.insert();//插入元素 ans.erase()//刪除某個指定元素 2.棧 3.樹 樹是一種特殊的數據結構&#xff0c;力扣二叉樹相…

vite+vue3開發uni-app時低版本瀏覽器不支持es6語法的問題排坑筆記

重要提示&#xff1a;請首先完整閱讀完文章內容后再操作&#xff0c;以免不必要的時間浪費&#xff01;切記&#xff01;&#xff01;&#xff01;在使用vitevue3開發uni-app項目時&#xff0c;存在低版本瀏覽器不兼容es6語法的問題&#xff0c;如“?.” “??” 等。為了方便…

《計算機視覺》——角點檢測和特征提取sift

角點檢測 角點的定義&#xff1a; 從直觀上理解&#xff0c;角點是圖像中兩條或多條邊緣的交點&#xff0c;在圖像中表現為局部區域內的灰度變化較為劇烈的點。在數學和計算機視覺中&#xff0c;角點可以被定義為在兩個或多個方向上具有顯著變化的點。比如在一幅建筑物的圖像…

WWW 2025 | 中南、微軟提出端到端雙重動態推薦模型,釋放LLM在序列推薦中的潛力...

©PaperWeekly 原創 作者 | 殷珺 單位 | 中南大學碩士研究生 研究方向 | 大語言模型、推薦系統 論文題目&#xff1a; Unleash LLMs Potential for Sequential Recommendation by Coordinating Dual Dynamic Index Mechanism 論文鏈接&#xff1a; https://openreview.net…

c# 2025/2/17 周一

16. 《表達式&#xff0c;語句詳解4》 20 未完。。 表達式&#xff0c;語句詳解_4_嗶哩嗶哩_bilibili