想要实现 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 传递数据的方法的更多相关文章

  1. 在Activity之间如何传递数据,请尽可能说出你所知道的传递数据的方法,并详细描述其实现过程。

    在Activity之间如何传递数据,请尽可能说出你所知道的传递数据的方法,并详细描述其实现过程. 答案:可以通过Intent对象.静态变量.剪切板和全局对象进行数据传递,具体的数据传递方法如下. 1. ...

  2. Vue(13)子组件与父组件超详细解析

    父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...

  3. [Vue]子组件与父组件之间传值

    1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...

  4. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  5. Android 开发中使用Intent传递数据的方法

    Activity之间通过Intent传递值,支持基本数据类型和String对象及 它们的数组对象byte.byte[].char.char[].boolean.boolean[].short.shor ...

  6. React子组件与父组件传值

    一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...

  7. Vue子组件与父组件之间的通信

    1.环境搭建 下载 vue-cli:npm install -g vue-cli 初始化项目:vue init webpack vue-demo 进入vue-demo文件夹:cd vue-demo 下 ...

  8. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  9. angular 子组件与父组件通讯

    1. 子组件app-sidebar.compnent.html (click)="goProject()"设置点击事件 <mat-list-item [routerLink] ...

  10. react 实现组件嵌套以及子组件与父组件之间的通信

    当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...

随机推荐

  1. .NET 中高效 Excel 解决方案 MiniExcel

    前言 MiniExcel 是一个用于 .NET 平台的轻量级.高性能的库,专注于提供简单易用的 API 来处理 Excel 文件.以下是 MiniExcel 的特点总结: 轻量级与高效:MiniExc ...

  2. Cython与C函数的结合

    技术背景 在前面一篇博客中,我们介绍了使用Cython加速谐振势计算的方法.有了Cython对于计算过程更加灵活的配置(本质上是时间占用和空间占用的一种均衡),及其接近于C的性能,并且还最大程度上的保 ...

  3. Codeforces Round 947 (Div. 1 + Div. 2) A~H

    Codeforces Round 947 (Div. 1 + Div. 2) A 模拟. B 最小的 \(a\) 肯定作为 \(i\).对于不被 \(i\) 整除的,最小的那个作为 \(j\),判断是 ...

  4. (2024最新)有效解决OpenAI Chatgpt Plus升级报错【您的银行卡被拒绝了/your card has been declined」,不用再问怎么办?

    在OpenAI升级ChatGPT plus时我们可能会遇到升级报错[您的银行卡被拒绝了/your card has been declined」,有些人看到这个可能就会不知所措 注意,这个问题目前依旧 ...

  5. 安装docker并部署java项目

    docker部署springboot项目(详细教程)_使用docker部署springboot项目_流星007的博客-CSDN博客 ps:以下是部署到linux 服务器中的 案例(与chatgpt的对 ...

  6. pycham配置GitHub环境【一文了解window上GitHub的基本操作】

    基础用户设置[包含用户登录.密钥生成] 网络配置 外观->系统设置->https代理->检查连接 我这里测试网址是GitHub,连接成功即可后续操作[不成功别找我,我也不知道] gi ...

  7. 使用CPU运行大语言模型(LLM),以清华开源大模型ChatGLM3为例:无需显卡!用CPU搞定大模型运行部署!【详细手把手演示】

    教程视频地址: 无需显卡!用CPU搞定大模型运行部署![详细手把手演示] 按照上面视频进行安装配置之前需要注意,python编程环境需要大于等于python3.10,否则会运行报错.下载好GitHub ...

  8. 【转载】 机器学习的高维数据可视化技术(t-SNE 介绍) 外文博客原文:How t-SNE works and Dimensionality Reduction

    原文地址: https://www.displayr.com/using-t-sne-to-visualize-data-before-prediction/ 该文是网上传的比较多的一个 t-SNE ...

  9. python语言:通过对100个常用网站进行网络连接操作来判断当前的网络情况(是否被断掉)

    由于需要判断网络的通信情况,比如判断网络是否掉线,因此想到了一个笨方法,那就是对100个大型网站进行网络连接操作,通过是否连接成功来判断当前的网络是否被断掉. 这里的思路是只要大部分的网站可以连接通那 ...

  10. [SDOI2010] 城市规划 题解

    前言 题目链接:洛谷. 题意简述 树套环上求至少间隔两个位置的最大独立集. (树套环,即树上每个结点都是一个结点或环) 题目分析 将题目拆解成树上 DP 和环上 DP 即可.用 tarjan 缩点就行 ...