[本文已参与「新人创作礼」活动，一起开启掘金创作之路。]

1、父传子

父组件

<div>
     <ty-forme [item] = "currentItem"></ty-forme>
</div>
  export class HomeComponent implements OnInit {
    currentItem = "来自父组件";
  }

子组件

<div>
  父组件传来的值: {{item}}
</div>
import { Component, Input } from '@angular/core'; 
export class FormeComponent{
  @Input() item = '';//接收
  ngOnInit(): void {
     console.log(this.item)
  }
}

 2、子传父&&子组件调用父组件的函数

父组件

  <ty-forme (serchFn) = "showModal($event)"></ty-forme>
  export class HomeComponent implements OnInit {
  showModal(data:any): void {
    console.log(data)//接收子组件的传值
    this.isVisible = true;//子组件调用父组件函数打开父组件的弹框
  }
}

子组件

  <div>
     <button nz-button nzType="primary" (click)="addProduct()">商品添加</button>
  </div>
  import { Output, EventEmitter } from '@angular/core';
export class FormeComponent implements OnInit {
    @Output() serchFn = new EventEmitter();
    addProduct(){
        this.serchFn.emit("hahahah")
    }
}