0

0

Blazor 组件间状态共享的几种方法

煙雲

煙雲

发布时间:2026-01-13 11:10:35

|

817人浏览过

|

来源于php中文网

原创

Blazor组件间共享状态有四种方式:1. CascadingParameter适用于父子组件局部透传;2. Singleton/Scoped服务适合跨页面响应式更新;3. NavigationManager监听路由参数适合URL驱动状态;4. JS Interop同步浏览器存储适合持久化场景。

blazor 组件间状态共享的几种方法

Blazor 组件间共享状态,核心在于让多个组件能读写同一份数据。选哪种方式,取决于数据作用域、更新频率、是否跨页面,以及你愿不愿意引入额外依赖。

使用 CascadingParameter 传递上下文状态

适合父子组件层级明确、状态只在局部树中流动的场景。比如主题色、用户登录态、语言偏好等需要“自上而下”透传但不希望层层手动传参的情况。

  • 父组件用 CascadingValue 包裹子内容,并提供值或对象实例
  • 子组件用 [CascadingParameter] 接收,支持类型匹配或命名匹配(CascadingParameter(nameof="MyState")
  • 注意:默认不触发重渲染 —— 如果共享的是普通 class 实例,需手动调用 StateHasChanged();更推荐用 INotifyPropertyChanged 或封装为 ObservableObject 类型

通过服务(Singleton Scoped Service)集中管理状态

最常用也最推荐的方式,尤其适合跨路由、多级嵌套、需响应式更新的状态(如购物车、全局通知、表单暂存)。

  • 注册为 Singleton(整个应用生命周期一份)或 Scoped(每个 Circuit 一份,Blazor Server 默认;WASM 中 Scoped 等同于 Singleton)
  • 服务内部用 EventCallbackNotifyStateChanged 事件,或集成 System.Reactive / Microsoft.Extensions.DependencyInjection 的观察者模式
  • 组件中注入该服务,监听变化并调用 InvokeAsync(StateHasChanged) 触发刷新(Server)或直接调用(WASM)

利用 NavigationManager 监听路由 + 参数解析

适用于状态本质来自 URL(如搜索关键词、分页页码、筛选条件),且希望支持浏览器前进/后退、分享链接的场景。

Viggle AI
Viggle AI

Viggle AI是一个AI驱动的3D动画生成平台,可以帮助用户创建可控角色的3D动画视频。

下载
  • 组件注入 NavigationManager,订阅 LocationChanged 事件解析查询参数
  • 配合 UriHelper(WASM)或 NavigationManager.ToBaseRelativePath 提取路径段
  • 注意:仅适合“只读”或“可序列化”的轻量状态;修改状态需主动 NavigationManager.NavigateTo 更新 URL,避免硬刷新

借助 JS Interop 同步浏览器端存储

当状态需持久化、跨会话保留,或与第三方 JS 库共用数据时可用,比如用户偏好设置、折叠面板状态。

  • localStoragesessionStorage 存储 JSON 字符串
  • Blazor 组件通过 IJSRuntime 调用 JS 方法读写,再触发本地状态更新
  • 建议封装成带变更通知的服务(例如:写入后触发 OnStateChanged 事件),避免多个组件各自轮询

基本上就这些。不需要复杂框架时,服务 + 事件就够了;要深度解耦可考虑 Flux-like 模式(如 Blazored.Fluxor),但多数项目真用不到那么重。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

411

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

532

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

254

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

206

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1463

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

617

2023.11.24

PHP 表单处理与文件上传安全实战
PHP 表单处理与文件上传安全实战

本专题聚焦 PHP 在表单处理与文件上传场景中的实战与安全问题,系统讲解表单数据获取与校验、XSS 与 CSRF 防护、文件类型与大小限制、上传目录安全配置、恶意文件识别以及常见安全漏洞的防范策略。通过贴近真实业务的案例,帮助学习者掌握 安全、规范地处理用户输入与文件上传的完整开发流程。

1

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号