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,一经查实,立即删除!

相关文章

设计模式-备忘录

备忘录&#xff08;Memento&#xff09;设计模式是为了保存对象当前状态&#xff0c;并在需要的时候恢复到之前保存的状态。以下是一个简单的C#备忘录模式的实现&#xff1a; // Originator 类&#xff0c;负责创建和恢复备忘录 class Originator {private string state;publi…

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

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

如何理解tcp的三次握手?

TCP&#xff08;传输控制协议&#xff09;是一种网络通信协议&#xff0c;用于可靠地传输数据。它是互联网协议套件&#xff08;TCP/IP&#xff09;中的一部分&#xff0c;负责将数据分割成小块&#xff08;称为数据包&#xff09;&#xff0c;通过网络传输&#xff0c;然后在接…

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

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

语音合成大模型汇总

https://www.speechhome.com/blogs/news/1810969234071752704 阿里CosyVoice&#xff1a; https://github.com/FunAudioLLM/CosyVoice NeuCo v2声音克隆首发&#xff0c;一键AI翻唱&#xff0c;无需训练&#xff01;在线版SoVITS&#xff0c;在线使用&#xff0c;只需10秒音频…

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…

ubuntu Ubuntu 20.04.6 LTS 安装vtk 报错缺少opengl

ubuntu编译9.3.0 vtk报错 -- Could NOT find OpenGL (missing: OPENGL_opengl_LIBRARY OPENGL_glx_LIBRARY OpenGL) CMake Error at CMake/vtkModule.cmake:4793 (message): Could not find the OpenGL external dependency. Call Stack (most recent call first): CMake/vtkMo…

typescript 断言

/* 断言 确定后期一定是某种格式 可用于表单大对象初始化是空&#xff0c;赋值时有具体字段。前期断言是会是某种格式 */interface obj {name: stringlocation: stringage?: number }// 会报错 // let data: obj { // // } let data: obj {} as obj; // 断言data会有obj里…

PHP框架详解之Symfony框架

一、框架概述 起源与开发者&#xff1a;Symfony由SensioLabs&#xff08;现为Symfony公司&#xff09;开发&#xff0c;最初由Fabien Potencier于2005年创建。功能定位&#xff1a;Symfony通过提供一套可重用的组件和标准化的框架&#xff0c;帮助开发者快速构建Web应用、API、…

如何将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 …

CentOS下通过yum搭建完整lnmp环境(多版本PHP共存)

lnmp即 Linux Nginx Mysql PHP&#xff0c;在同一台服务器&#xff0c;可以支持多版本PHP共存使用&#xff0c;本文以 CentOS 7.x 为例介绍如何通过 yum 的方式搭建多版本 PHP 的 lnmp 环境。 前置条件 假设服务器已经通过 yum 方式搭建 lnmp 环境&#xff08;单版本PHP&a…

Linux下50个基本命令的使用说明【按首字母排序】

1. alias 用于为命令创建别名&#xff0c;以简化命令的输入。 alias llls -l # 现在输入ll将等同于ls -l2. apt-get 用于Debian及其衍生发行版的包管理工具。 sudo apt-get update # 更新包列表 sudo apt-get install package_name # 安装软件包3. cat 用于连接和显示文件内…

Scrapy框架在处理大规模数据抓取时有哪些优化技巧?

在使用Scrapy框架处理大规模数据抓取时&#xff0c;优化技巧至关重要&#xff0c;可以显著提高爬虫的性能和效率。以下是一些实用的优化技巧&#xff1a; 1. 并发请求 增加并发请求的数量可以提高爬虫的响应速度和数据抓取效率。可以通过设置CONCURRENT_REQUESTS参数来调整。…

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

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

git 鉴权失败

这条错误信息通常出现在使用Git进行远程操作时&#xff0c;比如克隆仓库、拉取更新或推送代码。错误的含义是&#xff1a; HTTP Basic: Access denied&#xff1a;访问被拒绝。The provided password or token is incorrect&#xff1a;提供的密码或令牌不正确。Your account …

邦芒秘诀:学会这3招在职场中让自己变得强大

职场上我们总希望自己掌握主动&#xff0c;能够有一定的能力“控场”&#xff0c;但往往事实上并不如此&#xff0c;甚至是不受领导们待见。 ​想要让自己变得强大&#xff0c;要注意做到这三点。 ​1、多展示自己&#xff0c;雁过留痕。 有些人就是实干派&#xff0c;努力做出…