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
Blazor 子组件与父组件通过 ChildEvents 传递数据的方法的更多相关文章
- 在Activity之间如何传递数据,请尽可能说出你所知道的传递数据的方法,并详细描述其实现过程。
在Activity之间如何传递数据,请尽可能说出你所知道的传递数据的方法,并详细描述其实现过程. 答案:可以通过Intent对象.静态变量.剪切板和全局对象进行数据传递,具体的数据传递方法如下. 1. ...
- Vue(13)子组件与父组件超详细解析
父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...
- [Vue]子组件与父组件之间传值
1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...
- vue组件详解——使用props传递数据
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...
- Android 开发中使用Intent传递数据的方法
Activity之间通过Intent传递值,支持基本数据类型和String对象及 它们的数组对象byte.byte[].char.char[].boolean.boolean[].short.shor ...
- React子组件与父组件传值
一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...
- Vue子组件与父组件之间的通信
1.环境搭建 下载 vue-cli:npm install -g vue-cli 初始化项目:vue init webpack vue-demo 进入vue-demo文件夹:cd vue-demo 下 ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- angular 子组件与父组件通讯
1. 子组件app-sidebar.compnent.html (click)="goProject()"设置点击事件 <mat-list-item [routerLink] ...
- react 实现组件嵌套以及子组件与父组件之间的通信
当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...
随机推荐
- h5py文件写入之——flush和update
技术背景 在前面的一篇博客中,我们介绍过使用VMD可视化H5MD标准化格式的轨迹文件的方法.H5MD本质上就是一个有规范格式的hdf5二进制文件,本文主要介绍两个关于hdf5的内容更新操作. 写入和更 ...
- python os.path 模块详解
python os.path 模块详解 os.path.basename() 返回最后一项,通常是文件名os.path.dirname() 返回的是目录,不包含文件名os.path.split() 返 ...
- HTML+JavaScript+CSS做一个界面
下面是一个web界面主要是前端没有后端功能:关于JavaScript几种比较常见的样式 Javaweb(1),html <!DOCTYPE html> <html lang=&q ...
- 【Vue】单据打印功能
一.打印组件 需要选定区域进行打印,使用vue-print组件 组件安装 npm install vue-print-nb --save 在项目的Main.js中引入(全局注册): import Pr ...
- 【Maven】概念知识
怎么在Windows安装Maven https://www.cnblogs.com/mindzone/p/12701416.html 学到一个新的指令:查看相对系统变量 echo %XXX_HOME% ...
- 读论文《Distilling the Knowledge in a Neural Network》——蒸馏网络 —— 蒸馏算法 —— 知识蒸馏 中的温度系数到底怎么用, temperature怎么用?
论文地址: https://arxiv.org/pdf/1503.02531.pdf 蒸馏网络的重要公式: 其中,\(p^g\)为Teacher网络,\(q\)为Student网络. 个体神经网络(C ...
- 使用MindSpore_hub 进行 加载模型用于推理或迁移学习
从官方资料: https://www.mindspore.cn/tutorial/training/zh-CN/r1.2/use/save_model.html?highlight=save_chec ...
- MPI在Deep Learning的主流时代背景下除了传统计算领域外对DL的应用前景如何,MPI与NCCL的区别在哪???
做分布式计算的基本上10年之前只听说过MPI,14年之前只听过hadoop的MapReduce,17年之前只听过TensorFlow. 那么这三个分布式计算软件或者说框架有什么区别呢???现在都是搞d ...
- hibernate validation,spring validation自定义参数校验
1.背景 在实际开发中,我们除了会使用常用的参数判断,如字符串不为空,最大值,最小值等 我们还可以自定义参数校验规则 2.实际生产问题 实际生产中同步订单的时候, 假设我们要求订单状态值只能是 -1, ...
- JVM指令大全之不太全系列
一.未归类系列A 此系列暂未归类. 指令码 助记符 说明0x00 nop ...