想要实现 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. 简单认识APP项目

    manifests:里面只有一个xml,是app运行配置文件 清单文件 <?xml version="1.0" encoding="utf-8"?> ...

  2. 【MongoDB】Re02 文档CRUD

    三.文档操作(行记录) 不管comment集合是否存在,直接在comment集合中创建一份文档 > db.comment.insert({"articleid":" ...

  3. 【Spring】使用SpringTest报错 java.lang.NoSuchMethodError

    完整报错信息: "C:\Program Files\Java\jdk1.8.0_301\bin\java.exe" -ea -Didea.test.cyclic.buffer.si ...

  4. 【Tutorial C】04 基本输入输出

    输出单个字符 putchar('a'); // 字符输出函数,其功能是在终端(显示器)输出单个字符. putchar('\n'); // 支持转义换行 putchar(77); // 可以直接注入AS ...

  5. 从.net开发做到云原生运维(六)——分布式应用运行时Dapr

    1. 前言 上一篇文章我们讲了K8s的一些概念,K8s真的是带来了很多新玩法,就像我们今天这篇文章的主角Dapr一样,Dapr也能在K8s里以云原生的方式运行.当然它也可以和容器一起运行,或者是CLI ...

  6. (续)signal-slot:python版本的多进程通信的信号与槽机制(编程模式)的库(library) —— 强化学习ppo算法库sample-factory的多进程包装器,实现类似Qt的多进程编程模式(信号与槽机制) —— python3.12版本下成功通过测试

    前文: signal-slot:python版本的多进程通信的信号与槽机制(编程模式)的库(library) -- 强化学习ppo算法库sample-factory的多进程包装器,实现类似Qt的多进程 ...

  7. 动手煮面的一次经历,加餐DIY

    去年和今年一直是有疫情的,也是如此像我这种在学校呆着的不是在家窝着就是在学校窝着,尤其是到了假期的时候,如果晚回家几天那食堂的伙食就会变得十分的恐怖. 面对这样的伙食也是十分的无奈,虽然也是十分理解当 ...

  8. 如何在AWS上构建Apache DolphinScheduler

    引言 随着云计算技术的发展,Amazon Web Services (AWS) 作为一个开放的平台,一直在帮助开发者更好的在云上构建和使用开源软件,同时也与开源社区紧密合作,推动开源项目的发展. 本文 ...

  9. Apache SeaTunnel 及 Web 功能部署指南(小白版)

    在大数据处理领域,Apache SeaTunnel 已成为一款备受青睐的开源数据集成平台,它不仅可以基于Apache Spark和Flink,而且还有社区单独开发专属数据集成的Zeta引擎,提供了强大 ...

  10. 【简单菊花图】Codeforce 1583Problem - B.md

    1583Problem - B - Codeforces 题目大意:n个点的无根树 给出m个限制条件 (a,c,b)在a到b路径上不能存在c点,求任意一种可能的树的所有边 注意数据范围:1<m& ...