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 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
javascript常用对话框小集
Sep 13 Javascript
javascript时间函数大全
Jun 30 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
小程序开发之模态框组件封装
Apr 23 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入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
利用Python爬取可用的代理IP
2016/08/18 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python使用thrift教程的方法示例
2019/03/21 Python
Python画图高斯分布的示例
2019/07/10 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
介绍一下常见的木马种类
2014/11/15 面试题
入党积极分子介绍信
2014/01/17 职场文书
企业文化建设实施方案
2014/03/22 职场文书
出差报告怎么写
2014/11/06 职场文书
人工作失职检讨书
2015/05/05 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
合作协议书格式范本
2016/03/21 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技