ionic4之父子公共组件使用

1.在创建一个公共的component组件,称为父组件,在其他页面中使用该组件,故其他页面都称为子组件。

父子组件之间的传值方式,

父组件中使用@input和@output进行接收值和传值,在子标签中使用[input]=“‘red’”,即可将red值传给父组件。

在父组件中使用@output定义的变量,如父组件定义@outPut  HiHi:EventEmitter<any> =new EventMitter();

子组件像调用方法一般调用即可:(HiHi)="getData($evevnt)"    子组件输出数据,父组件通过this.HiHi.emit('6666')传值。

@HostBinding("style.z-index") style=9999;这个属性可以修改父组件的样式

下面代码:

父组件:

export class ClosePopupComponent {

  @HostBinding('style.z-index') style = 1000;

  @Input() large: boolean;
  @Input() color: string;
  @Output() closePopUp: EventEmitter<any> = new EventEmitter();

  constructor() {}

  close() {
    console.log(this.color);
    this.closePopUp.emit("6666");
  }

}

子组件:

export class Tab1Page {

  getData(e){
    console.log("6666888");
     console.log(e);
  }
}

 

<ion-content>
     <close-popup (closePopUp)="getData($event)" [color]="'red'" [large]="'true'"></close-popup>
</ion-content>

 

注意:子组件页面中【color】传值必须用‘’包住才行。

发布了50 篇原创文章 · 获赞 9 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览