发表于： 2019-10-09 22:28:09
1 829
今天完成的事情：
明天计划的事情：
遇到的问题：
收获：
父子组件间的通讯：
父组件给子组件传值：
1、子组件可以获取父组件的数据
2、子组件可以执行父组件的方法
子组件给父组件传值：
1、父组件可以获取子组件的数据
2、父组件可以获取子组件的方法
非父子组件：
组件之间传值
共享方法
一、父组件给子组件传值-@input
父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件
1. 父组件调用子组件的时候传入数据 ，在父组件中的代码：
<app-header [title]="title" [msg]="msg" [run]='run' [home]='this'></app-header>
2. 子组件引入 Input 模块
import { Component, OnInit ,Input } from '@angular/core';
3. 子组件中 @Input 接收父组件传过来的数据
export class HeaderComponent implements OnInit {
//接受父组件传来的数据
@Input() title:any;
@Input() msg:any;
@Input() run:any;
@Input() home:any;
constructor() { }
ngOnInit() {
}
getParentMsg(){
//获取父组件的数据
alert(this.msg);
}
getParentRun(){
//执行父组件的run 方法
// this.run();
alert(this.home.msg);
this.home.run();
}
}
上面demo中子组件使用了父组件的数据和方法
返回列表
评论