Blazor 怎么向组件传递参数

发布时间 - 2026-01-09 00:00:00    点击率:
Blazor中组件参数传递主要通过[Parameter]特性实现,要求属性为public且可set;支持简单类型、RenderFragment子内容和EventCallback事件回调,并可设默认值或可空类型。

Blazor 中向组件传递参数主要通过 组件参数(Component Parameters) 实现,本质是给组件的 public 属性打 [Parameter] 特性。这是最常用、最直接的方式。

使用 [Parameter] 传递简单类型参数

在子组件中定义带 [Parameter] 特性的 public 属性,父组件在引用时用属性语法传值:

  • 子组件(如 Counter.razor)中写:
    @code {
    [Parameter] public int StartCount { get; set; } = 0;
    [Parameter] public string Title { get; set; } = "计数器";
    }
  • 父组件中使用:
  • 注意:参数名区分大小写,且必须是 public、可 set 的属性;不加 [Parameter] 不会被识别为输入参数。

传递组件内容(Child Content)

[Parameter] public RenderFragment ChildContent { get; set; } 接收嵌套内容:

  • 子组件(如 Card.razor)中定义:
    [Parameter] public RenderFragment ChildContent { get; set; }
  • 模板中渲染:

    @ChildContent
  • 父组件调用:

    标题


    这里是卡片正文


传递事件回调(EventCallback)

让子组件“通知”父组件,用 EventCallback

  • 子组件中声明:
    [Parameter] public EventCallback OnClick { get; set; }
  • 触发时调用:
    await OnClick.InvokeAsync("按钮被点了");
  • 父组件绑定:

    并在 @code 块中定义:
    private void HandleClick(string msg) { ... }

可选参数与默认值

参数可以设默认值(C# 属性默认值或构造函数初始化),不传也不会报错:

  • [Parameter] public bool IsEnabled { get; set; } = true;
  • 也可用 [Parameter] public string? Description { get; set; } 表示可为空,不传即为 null
  • 若需判断是否显式传入,可用 bool HasValue 配合 nullable 引用类型 + 初始化检查,但 Blazor 本身不提供“是否传了”的元信息,一般靠默认值语义区分。

基本上就这些。参数传递不复杂但容易忽略大小写和 public/set 要求,写完记得检查编译错误提示 —— 它通常会明确告诉你哪个属性没加 [Parameter] 或不可访问。


# ai  # c#  # 编译错误  # String  # NULL  # 构造函数  # bool  # int  # void  # 引用类型  # 空类型  # public  # private  # 值参数  # Nullable  # 事件  # 默认值  # 回调  # 不传  # 这是  # 也不  # 告诉你  # 并在  # 点了  # 可选  # 并可 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  如何实现建站之星域名转发设置?  公司门户网站制作流程,华为官网怎么做?  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  JavaScript如何实现继承_有哪些常用方法  最好的网站制作公司,网购哪个网站口碑最好,推荐几个?谢谢?  jQuery中的100个技巧汇总  太平洋网站制作公司,网络用语太平洋是什么意思?  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  做企业网站制作流程,企业网站制作基本流程有哪些?  高性能网站服务器部署指南:稳定运行与安全配置优化方案  Linux后台任务运行方法_nohup与&使用技巧【技巧】  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  北京网页设计制作网站有哪些,继续教育自动播放怎么设置?  深圳网站制作平台,深圳市做网站好的公司有哪些?  济南网站建设制作公司,室内设计网站一般都有哪些功能?  如何在 Telegram Web View(iOS)中防止键盘遮挡底部输入框  油猴 教程,油猴搜脚本为什么会网页无法显示?  图册素材网站设计制作软件,图册的导出方式有几种?  如何在企业微信快速生成手机电脑官网?  魔毅自助建站系统:模板定制与SEO优化一键生成指南  使用豆包 AI 辅助进行简单网页 HTML 结构设计  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  弹幕视频网站制作教程下载,弹幕视频网站是什么意思?  如何快速搭建二级域名独立网站?  清除minerd进程的简单方法  网站制作软件有哪些,制图软件有哪些?  Python文本处理实践_日志清洗解析【指导】  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  如何在宝塔面板创建新站点?  JavaScript如何操作视频_媒体API怎么控制播放  轻松掌握MySQL函数中的last_insert_id()  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  JavaScript如何实现倒计时_时间函数如何精确控制  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  浅谈javascript alert和confirm的美化  怎么用AI帮你设计一套个性化的手机App图标?  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  头像制作网站在线观看,除了站酷,还有哪些比较好的设计网站?  Android自定义listview布局实现上拉加载下拉刷新功能  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup