Angular2父子组件之间数据传递：@Input和@Output (下)

英格兰  坎布里亚郡

为了让大家学习起来轻松、易懂，小编尽量做到篇幅短，语言通俗易懂，知识点分段来讲，以免太长了看起来很累，也很容易失去耐心阅读下去，希望大家理解和支持，同时希望大家点赞和分享出去，让更多的志同道合的朋友来学习

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

第一步定义子组件

childenComponent.ts

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

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

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

childenComponent.html

第二步定义父组件

parentComponent.ts

parentComponent.html

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


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

<完>

福利：如果你是喜欢看书的朋友，不妨点击【有惊喜】这是我在亚马逊买的电子书。都非常珍贵，希望你能喜欢

作者：小处成就大事

简介：一个喜欢分享和学习的前端开发程序猿，平时喜欢看看书，游泳，爬山，户外骑行等，期待与志同道合的你成为朋友，一起交流、一起进步。

初衷：对我来说，写文章是学习和记录一些没有精通和完全掌握的知识点，其次才是分享知识。通过自己查找资料和经验心得整理出来，做到通俗易懂分享给需要的人，分享知识不是为了炫耀，也不是为了谋利，而是为了更多需要汲取知识的人，可以收获知识，同时自己也可以从中收获知识，坚持做知识分享真的很难，但是我会坚持下去····

博客：小处成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和学习，期待你的到来