09父子組件的傳值input output上06

1、父子組件傳值Input Output ViewChild主講教師：（大地）合作合作：（IT 營(yíng)）： ( Ionic 中文網(wǎng) )目錄一、 父組件給子組件傳值 -Input1二、 父子組件傳值的方式讓子組件執(zhí)行父組件的方法2三、 子組件通過(guò)Output 執(zhí)行父組件的方法4四、 父組件通過(guò)局部變量獲取子組件的，主動(dòng)獲取子組件的數(shù)據(jù)和方法（一） 5五、 父組件通過(guò) ViewChild 主動(dòng)獲取子組件的數(shù)據(jù)和方法6一、父組件給子組件傳值-Input1. 父組件調(diào)用子組件的時(shí)候傳入數(shù)據(jù)2. 子組件引入 Input 模塊3. 子組件中 Input 接收父組件傳過(guò)來(lái)的數(shù)據(jù)import Component, O

2、nInit ,Input from angular/core;4. 子組件中使用父組件的數(shù)據(jù)二、父子組件傳值的方式讓子組件執(zhí)行父組件的方法1. 父組件定義方法2調(diào)用子組件傳入當(dāng)前方法run()alert(這是父組件的 run 方法);這是頭部組件-msgexport classponent implements OnInit Input() msg:stringconstructor() ngOnInit() 3. 子組件接收父組件傳過(guò)來(lái)的方法4. 子組件使用父組件的方法。export class ponent implements OnInit Input() msg:string;Inpu

3、t() run:any; constructor() ngOnInit() this.run(); /*子組件調(diào)用父組件的 run 方法*/export classponent implements OnInit Input() msg:string Input() run:any;constructor() Input() run:any;import Component, OnInit ,Input from angular/core;三、子組件通過(guò)Output法執(zhí)行父組件的方1. 子組件引入 Output 和 EventEmitter2.子組件中實(shí)例化 EventEmitter3. 子組

4、件通過(guò) EventEmitter 對(duì)象 outer 實(shí)例廣播數(shù)據(jù)4.父組件調(diào)用子組件的時(shí)候，定義接收事件 , outer 就是子組件的 EventEmitter 對(duì)象 outer5.父組件接收到數(shù)據(jù)會(huì)調(diào)用自己的 runParent 方法，這個(gè)時(shí)候就能拿到子組件的數(shù)據(jù)sendParent()/ alert(zhixing); this.outer.emit(msg from child)Output() private outer=new EventEmitter();/*用 EventEmitter 和 output 裝飾器配合使用 指定類(lèi)型變量*/import Component, OnIn

5、it ,Input,Output,EventEmitter from angular/core;四、父組件通過(guò)局部變量獲取子組件的引用 ，主動(dòng)獲取子組件的數(shù)據(jù)和方法（一）1. 定義 footer 組件2. 父組件調(diào)用子組件的時(shí)候給子組件起個(gè)名字export classponent implements OnInit public msg:string;constructor() ngOnInit() footerRun()alert(這是 footer 子組件的Run 方法);/接收子組件傳遞過(guò)來(lái)的數(shù)據(jù) runParent(msg:string)alert(msg);3. 直接獲取執(zhí)行子組件的方法五、父組件通過(guò)局部變量獲取子組件的引用,通過(guò)ViewChild 主動(dòng)獲取子組件的數(shù)據(jù)和方法1.調(diào)用子組件給子組件定義一個(gè)名稱(chēng) 2. 引入 ViewChild3. ViewChild 和剛才的子組件關(guān)聯(lián)起來(lái)4.調(diào)用子組件run()this.footer.footerRun();ViewCh