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

1、父子組件傳值Input Output ViewChild主講教師：（大地）合作合作：（IT 營）： ( Ionic 中文網(wǎng) )目錄一、 父組件給子組件傳值 -Input1二、 父子組件傳值的方式讓子組件執(zhí)行父組件的方法2三、 子組件通過Output 執(zhí)行父組件的方法4四、 父組件通過局部變量獲取子組件的，主動獲取子組件的數(shù)據(jù)和方法（一） 5五、 父組件通過 ViewChild 主動獲取子組件的數(shù)據(jù)和方法6一、父組件給子組件傳值-Input1. 父組件調(diào)用子組件的時候傳入數(shù)據(jù)2. 子組件引入 Input 模塊3. 子組件中 Input 接收父組件傳過來的數(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. 子組件接收父組件傳過來的方法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;三、子組件通過Output法執(zhí)行父組件的方1. 子組件引入 Output 和 EventEmitter2.子組件中實(shí)例化 EventEmitter3. 子組

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

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