Blazor 子组件与父组件通过 ChildEvents 传参的方法
时间:2021-07-12
本文章向大家介绍Blazor 子组件与父组件通过 ChildEvents 传参的方法,主要包括Blazor 子组件与父组件通过 ChildEvents 传参的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
想要实现 Blazor 子组件向父组件发送数据, 参考 痴者工良的博文所描述的方式 ,Net 5.0 下编译未能通过, 于是先修改一下,简化为光触发事件通知而不传参
子组件 Child.razor :
<input @bind="Value" /> <button @onclick="StartEvent">传递到父组件</button> @code{ private string Value; [Parameter] public EventCallback<string> ChildEvents { get; set; } private async Task StartEvent() { if (ChildEvents.HasDelegate) { await ChildEvents.InvokeAsync(Value); } } }
父组件 Parent.razor :
@page "/p" <div class="bg-primary jumbotron text-white"> 子组件: <Child ChildEvents="@MyEvent" /> <br /> 父组件: <p>@_Value</p> </div> @code{ private string _Value; private void MyEvent() { Console.WriteLine("Got the ChildEvents"); } }
调试通过,子组件触发事件后,父组件可以进入 MyEvent().
传参怎么办? 我摸索半天,参照按钮事件用委托实现了
修改后可接受参数的父组件 Parent.razor
@page "/p" <div class="bg-primary jumbotron text-white"> 子组件: <Child ChildEvents="(e)=>MyEvent(e)" /> <br /> 父组件: <p>@_Value</p> </div> @code{ private string _Value; private void MyEvent(object Value) { Console.WriteLine($"Got the ChildEvents({Value})"); _Value = Value.ToString(); } }
需要注意的是 ClientEvents 委托里面的参数类型只能是 object
原文地址:https://www.cnblogs.com/towerbit/p/15001381.html
- [WCF安全系列]绑定、安全模式与客户端凭证类型:BasicHttpBinding
- [WCF安全系列]服务凭证(Service Credential)与服务身份(Service Identity)
- 如何正确的对安卓手机进行数据恢复?
- [WCF安全系列]绑定、安全模式与客户端凭证类型:WSHttpBinding与WSDualHttpBinding
- Python中list的遍历
- Python中的参数传递与解析
- [WCF安全系列]实例演示:TLS/SSL在WCF中的应用[HTTPS]
- QEMU3 - 使用ceph来存储QEMU镜像
- Redis错误配置详解
- 顺序存储线性表的实现
- 技术揭秘:什么是定位劫持?黑客是如何进行劫持攻击的?
- CSS概要
- 如何使用 scikit-learn 为机器学习准备文本数据
- 使用jQuery Validation插件来验证表单
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法