為了讓大家學(xué)習(xí)起來(lái)輕松、易懂，小編盡量做到篇幅短，語(yǔ)言通俗易懂，知識(shí)點(diǎn)分段來(lái)講，以免太長(zhǎng)了看起來(lái)很累，也很容易失去耐心閱讀下去，希望大家理解和支持，同時(shí)希望大家點(diǎn)贊和分享出去，讓更多的志同道合的朋友來(lái)學(xué)習(xí)
子組件向父組件傳遞數(shù)據(jù)使用事件傳遞是子組件向父組件傳遞數(shù)據(jù)最常用的方式，子組件需要實(shí)例化EventEmitter類來(lái)訂閱和觸發(fā)自定義事件
第一步定義子組件
childenComponent.ts
(1).實(shí)例化EventEmitter，賦值給event，event被@Output裝飾器定義為輸出屬性，這樣event具備了向上級(jí)傳遞數(shù)據(jù)的能力，通過(guò)調(diào)用EventEmitter類中定義的emit方法，來(lái)向上傳遞數(shù)據(jù)
(2).定義一個(gè)name屬性，用于接受子組件頁(yè)面的輸入
(3).定義upward方法，用于子組件頁(yè)面點(diǎn)擊事件 觸發(fā)事件調(diào)用，upward()方法里面調(diào)用自定義事件event來(lái)觸發(fā)emit方法 傳遞數(shù)據(jù)
childenComponent.html
第二步定義父組件
parentComponent.ts
parentComponent.html
父組件通過(guò)綁定自定義事件event ,來(lái)訂閱來(lái)自子組件觸發(fā)事件（這里是點(diǎn)擊事件），當(dāng)我們點(diǎn)擊子組件上面的按鈕，調(diào)用子組件的upward()方法,內(nèi)部實(shí)現(xiàn)會(huì)調(diào)用this.event.emit(this.name);傳遞數(shù)據(jù)，自此父組件就能夠監(jiān)聽(tīng)自定義事件event。調(diào)用getData來(lái)接收傳遞過(guò)來(lái)的數(shù)據(jù)
最終效果:表單輸入數(shù)據(jù)，點(diǎn)擊頁(yè)面按鈕，數(shù)據(jù)傳遞到父組件，在顯示出來(lái)
<完>
福利：如果你是喜歡看書的朋友，不妨點(diǎn)擊【有驚喜】這是我在亞馬遜買的電子書。都非常珍貴，希望你能喜歡
作者：小處成就大事
簡(jiǎn)介：一個(gè)喜歡分享和學(xué)習(xí)的前端開(kāi)發(fā)程序猿，平時(shí)喜歡看看書，游泳，爬山，戶外騎行等，期待與志同道合的你成為朋友，一起交流、一起進(jìn)步。
初衷：對(duì)我來(lái)說(shuō)，寫文章是學(xué)習(xí)和記錄一些沒(méi)有精通和完全掌握的知識(shí)點(diǎn)，其次才是分享知識(shí)。通過(guò)自己查找資料和經(jīng)驗(yàn)心得整理出來(lái)，做到通俗易懂分享給需要的人，分享知識(shí)不是為了炫耀，也不是為了謀利，而是為了更多需要汲取知識(shí)的人，可以收獲知識(shí)，同時(shí)自己也可以從中收獲知識(shí)，堅(jiān)持做知識(shí)分享真的很難，但是我會(huì)堅(jiān)持下去····
博客：小處成就大事_新浪博客
如果有志同道合的朋友不妨加微信一起交流和學(xué)習(xí)，期待你的到來(lái)
