Angular 5 數(shù)據(jù)在components之間傳遞(下) 子組建--->父組建

子組件通過event向父組件傳遞信息,比父到子的數(shù)據(jù)傳遞要稍微復(fù)雜一點。

這里我們有子組件cockpit和父組件app,結(jié)構(gòu)如下:cockpit組件中有兩個button和兩個輸入框,點擊button后,會把輸入框的值傳遞到app組件的serverElements arry中。


首先,子組件cockpit中雙向綁定數(shù)據(jù):


然后進行數(shù)據(jù)傳輸:

1,連接父子組件,通過在app 的 html中用標簽連接:


這里(serverCreated)是app-cockpit組件的一個事件(event),“onServerAdded($event)”是屬于 app組件的一個function,這樣就把子組件的事件和父組件的function連接起來了。

2,先寫父組件app中的onServerAdded($event) 方法:這里的$event是一個javascript對象


3,然后去實現(xiàn)(serverCreated)事件,這個事件是在子組件cockpit中的 :


這里有幾個注意點: 1,serverCreated這個事件是一個EventEmitter對象,2,在serverCreated對象前要加@Output()注釋,3*,onServerAdded中的變量名要和EventEmitter中泛型的變量名一致(比如都是servername,servercontent)

4,在click button的方法中把這個serverCreated事件發(fā)布出去(關(guān)聯(lián)button):


onAddServer()方法是在html中于click綁定的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容