Angular 2父子组件数据传递之@Input和@Output详解(下)


Posted in Javascript onJuly 05, 2017

前言

之前已经给大家介绍了Angular 2父子组件数据传递之@Input和@Output的相关内容,下面这篇文章我们再进一步的进行介绍:

子组件向父组件传递数据使用事件传递是子组件向父组件传递数据最常用的方式,子组件需要实例化EventEmitter类来订阅和触发自定义事件

第一步定义子组件

childenComponent.ts

Angular 2父子组件数据传递之@Input和@Output详解(下)

(1).实例化EventEmitter,赋值给event,event被@Output装饰器定义为输出属性,这样event具备了向上级传递数据的能力,通过调用EventEmitter类中定义的emit方法,来向上传递数据

(2).定义一个name属性,用于接受子组件页面的输入

(3).定义upward方法,用于子组件页面点击事件 触发事件调用,upward()方法里面调用自定义事件event来触发emit方法 传递数据

childenComponent.html

Angular 2父子组件数据传递之@Input和@Output详解(下)

第二步定义父组件

parentComponent.ts

Angular 2父子组件数据传递之@Input和@Output详解(下)

parentComponent.html

Angular 2父子组件数据传递之@Input和@Output详解(下)

父组件通过绑定自定义事件event ,来订阅来自子组件触发事件(这里是点击事件),当我们点击子组件上面的按钮,调用子组件的upward()方法,内部实现会调用this.event.emit(this.name);传递数据,自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据

最终效果:表单输入数据,点击页面按钮,数据传递到父组件,在显示出来

Angular 2父子组件数据传递之@Input和@Output详解(下)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JavaScript模拟push
Mar 06 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 #Javascript
JS鼠标滚动分页效果示例
Jul 05 #Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 #Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 #Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
You might like
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
VUE项目初建和常见问题总结
2019/09/12 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
python获取标准北京时间的方法
2015/03/24 Python
python 异常处理总结
2016/10/18 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
最热门的自我评价
2013/12/30 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
早安问候语大全
2015/11/10 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js