父子组件的概念是相对的：
在这里插入图片描述

准备工作：

首先我们先新建一个项目：
打开命令行，跳转到要建立项目的目录输入：

ng new anguderDemo04

接下来在项目里面创建4个组件：
控制台输入：

ng g component components/footer
ng g component components/header
ng g component components/home
ng g component components/news

在这里插入图片描述

一、父组件给子组件传值-@input

父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件。

1.父组件里面定义数据

在这里插入图片描述

home.component.ts

import {
    
     Component, OnInit } from '@angular/core';

@Component({
    
    
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    
    
  public title: string = '首页组件的标题';

  public msg: string = '我是父组件的msg';

  constructor() {
    
    }

  ngOnInit() {
    
    }

  run() {
    
    
    alert('我是父组件的run方法');
  }
}

2. 父组件给子组件传递数据

在这里插入图片描述

home.component.html

<app-header [title]="title" [msg]="msg" [run]='run' [home]='this'></app-header>
<br>
<br>
<hr>
<br>
<br>
<div>我是首页组件</div>

3. 子组件里面接收数据

在这里插入图片描述
header.component.ts

import {
    
     Component, OnInit, Input } from '@angular/core';

@Component({
    
    
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
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();
  }
}

4. 子组件里面使用数据

在这里插入图片描述
header.component.html

<header>{
    
    {
    
    title}}--{
    
    {
    
    msg}}</header>
<br>
<button (click)="getParentMsg()">子组件里面获取父组件传入的msg</button>
<br>
<button (click)="getParentRun()">子组件里面执行父组件的run方法</button>