angular入门基础教程(五)父子组件的数据通信

组件之间的通信是我们业务开发中少不了的,先了解下父子组件的通信

父组件传数据给子组件

前面,我们学会会动态属性的绑定,所以在父组件中给子组件绑定属性,在子组件中就可以使用这个属性了。

  • 父组件中声明然后赋值

export class AppComponent {money = 100;
}
<main class="main"><p>Welcome to Angular!{{name}}</p><h3>下面是子组件的内容</h3><p>这是父组件的存款:{{money}}</p><app-user-list [childMoney]="money" />
</main>
  • 子组件里面接受这个属性

注意,这里我们使用@Input()装饰器来接受这个属性。值类型必须保持一致,否则会报错。

import { Component, Input } from '@angular/core';
export class UserListComponent {@Input() childMoney = 0;
}

显示父组件传过来的值

 <p>这里是子组件的money:{{childMoney}}
</p>

在这里插入图片描述

子组件传数据给父组件

  • 子组件
<p>这里是子组件的money:{{childMoney}}</p>
<button (click)="handleAdd()">赚钱</button>
<button (click)="handledec()">花钱</button>

const core里面引入EventEmitter,用来发射事件。Output声明一个事件发射器,用来发射事件。

  import { Component, EventEmitter, Input, Output } from '@angular/core';@Output() incrementCountEvent = new EventEmitter<number>();handleAdd() {this.incrementCountEvent.emit(1);}handledec() {this.incrementCountEvent.emit(-1);}
  • 父组件
    自定义事件,使用()绑定事件。接受参数,使用$event来接受。
<app-user-list [childMoney]="money" (incrementCountEvent)="handleChange($event)" />
 handleChange($event: any) {this.money += $event;}

就完成了子组件向父组件的通讯。

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/50771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能开关助力酒店管理提升

随着科技的迅猛跃进&#xff0c;智能化浪潮席卷全球&#xff0c;酒店业亦不例外地迎来了智能化转型的新纪元。智能开关&#xff0c;作为这股浪潮中的先锋&#xff0c;凭借其尖端的通信技术和智能控制逻辑&#xff0c;正深刻改变着酒店的运营模式与顾客体验。 它不仅赋予了酒店远…

IP地址证书签发之后可以绑定到指定端口访问吗?

IP地址证书概述 IP地址证书&#xff0c;也称为IP SSL证书&#xff0c;是为互联网协议(IP)地址提供安全认证的一种证书。它包含公钥、所有者信息以及由可信的证书颁发机构(CA)签发的数字签名。通过使用公钥基础设施(PKI)&#xff0c;IP地址证书确保了网络实体之间的信任和验证。…

React基础知识 精简全面 推荐

这篇博文主要对一些刚入门react框架的同学&#xff0c;以及对react基本知识进行巩固的&#xff0c;最后就是精简一下基本知识&#xff0c;以方便自己查看&#xff0c;感谢参考&#xff0c;有问题评论区交流&#xff0c;谢谢。 目录 1.JSX 2.Props 和 State 3.组件生命周期…

基于JAVA的美妆购物商城系统/美妆销售系统的设计与实现/美妆网站的设计与开发/在线美妆购物平台

摘 要 本毕业设计的内容是设计并且实现一个基于SSM框架的美妆购物商城系统。它是在Windows下&#xff0c;JSP技术&#xff0c;以MYSQL为数据库开发平台&#xff0c;Tomcat网络信息服务作为应用服务器。美妆购物商城系统的功能已基本实现&#xff0c;主要包括用户、商品信息、…

2024电赛H题参考方案(+视频演示+核心控制代码)——自动行使小车

目录 一、题目要求 二、参考资源获取 三、参考方案 1、环境搭建及工程移植 2、相关模块的移植 4、整体控制方案视频演示 5、视频演示部分核心代码 总结 一、题目要求 小编自认为&#xff1a;此次H题属于控制类题目&#xff0c;相较于往年较为简单&#xff0c;功能也算单一&…

科普文:『 码到三十五 』Java微服务中Token鉴权设计的4种方案

吐槽~~~~~~~ Java微服务中Token鉴权设计的几种方案: 1. JWT鉴权 「概述」&#xff1a;JWT是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。它基于JSON格式&#xff0c;包含三个部分&#xff1a;头部&#xff08;Header&#xff09;、负载&#xff08;Payload&a…

如何将WordPress文章中的外链图片批量导入到本地

在使用采集软件进行内容创作时&#xff0c;很多文章中的图片都是远程链接&#xff0c;这不仅会导致前端加载速度慢&#xff0c;还会在微信小程序和抖音小程序中添加各种域名&#xff0c;造成管理上的麻烦。特别是遇到没有备案的外链&#xff0c;更是让人头疼。因此&#xff0c;…

Monte Carlo Tree Search Boosts Reasoning via Iterative Preference Learning

Monte Carlo Tree Search Boosts Reasoning via Iterative Preference Learning Github&#xff1a;https://github.com/YuxiXie/MCTS-DPO 一、动机 大语言模型在偏好对齐环节可以提高模型的性能。目前有诸多工作尝试将偏好对齐通过迭代的形式进行改进: It involves a cycle …

装修行业办公家具销售公司网站带模版 附带完整的源代码包以及搭建部署教程

系统概述 这款网站源码系统是针对装修行业办公家具销售公司的特点定制的&#xff0c;它融合了现代化的设计理念和先进的技术架构&#xff0c;旨在为用户提供极佳的浏览和购物体验。系统采用了响应式设计&#xff0c;能够自适应不同设备的屏幕尺寸&#xff0c;确保用户在手机、…

【ai】 2005年 rule based expert system学习笔记1

PPT 是2005年的? Negnevitsky, Pearson Education 使用两种推理引擎的选择 backward chaining(逆向链接)推理过程 backward chaining(逆向链接)推理过程的GPT解释 这幅图展示了一个基于规则的专家系统如何通过backward chaining(逆向链接)推理过程来达到最终的推理目标…

大数据-55 Kafka sh脚本使用 与 JavaAPI使用 topics.sh producer.sh consumer.sh kafka-clients

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

禁毒教育展厅应如何创新展示方式,提升教育意义?

为了深刻揭示毒品的危害&#xff0c;促进禁毒知识的广泛传播&#xff0c;并显著提升公众的防范意识&#xff0c;禁毒教育展厅的推广举措正紧锣密鼓地展开。在这一关键进程中&#xff0c;展厅的空间布局与内容设计的合理性与针对性成为了至关重要的环节。接下来&#xff0c;我们…

angular入门基础教程(二)第一个angular组件

ng中的语法跟vue中是一样的插值语法&#xff0c;其实也是早期vue抄的ng的思路&#xff0c;使用{{variable}}形式&#xff0c;vue借鉴了ng和react&#xff0c;这个我们就不多了。 新建一个子组件 在项目根目录下面&#xff0c;执行 ng g component ./components/UserList这样…

【RL】强化学习入门:从基础到应用

本篇文章是博主强化学习RL领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章强化学习&#xff1a; 强化学习…

JDBC介绍及使用

目录 JDBC概述 JDBC概念 JDBC本质 JDBC好处 JDBC快速入门 JDBC API详解 DriverManager Connection Statement ResultSet PreparedStatement 数据库连接池 数据库连接池简介 数据库连接池实现 Driud使用 JDBC练习 JDBC概述 JDBC概念 JDBC 就是使用Java语言操作…

Docker Compose V2 安装 ClickHouse v20.6.8.5 经验分享

前言 ClickHouse 是一款开源的分布式列式数据库管理系统,专门设计用于高性能的大数据分析和查询。 目前项目中用到的一个场景是将mongo的数据同步到clickhouse,使用clickhouse做报表,后续也将分享同步和使用方案 使用 Docker Compose 部署单机版,小项目和自己测试够用了,生…

海外短剧CPS系统,平台短剧出海推广方案

随着国内短剧市场的蓬勃发展与国际化趋势的加速&#xff0c;海外观众对于高质量、富有创意的短剧内容需求日益增长。在此背景下&#xff0c;搭建一个高效、便捷的海外短剧CPS&#xff08;Cost Per Sales&#xff0c;按销售分润&#xff09;分销系统平台&#xff0c;能为内容创作…

实战内测-某内测项目站点FUZZ到Sql注入

0x1 前言 下面给师傅们分享的案例呢是前段时间实战的一个站点&#xff0c;也是我朋友前段时间让我测的一个站点。整体的测试流程也还算ok&#xff0c;然后里面有些细节要是对师傅们有帮助可以收藏下&#xff0c;后面主要是利用FUZZ打了一个sql注入漏洞上去。 0x2 fuzz和sql结…

Halcon Blob分析

斑点分析的思路&#xff1a;在图像中&#xff0c;相关对象的像素可以通过其灰度值来识别。例如下图的组织颗粒。这些颗粒是凉的&#xff0c;而液体是暗的&#xff0c;通过选择明亮像素(阈值)&#xff0c;可以很容易地检测到颗粒。在需要应用中&#xff0c;这种简单的暗像素和亮…

HarmonyOS持久化存储数据Preference

Preference首选项 首选项&#xff1a;首选项为应用提供Key-Value键值型的数据处理能力&#xff0c;支持应用持久化轻量级数据&#xff0c;并对其修改和查询。数据存储形式为键值对&#xff0c;键的类型为字符串型&#xff0c;值的存储数据类型包括数字型、字符型、布尔型以及这…