angular12子父组件传值

最新推荐文章于 2024-03-09 20:55:57 发布

MrLi-2018

最新推荐文章于 2024-03-09 20:55:57 发布

阅读量404

点赞数 1

分类专栏： angular 父子组件传值子组件调用父组件的函数文章标签： html angular

本文链接：https://blog.youkuaiyun.com/weixin_42729938/article/details/120058545

版权

angular 同时被 3 个专栏收录

2 篇文章

订阅专栏

父子组件传值

2 篇文章

订阅专栏

子组件调用父组件的函数

1 篇文章

订阅专栏

这篇博客详细介绍了在Angular框架中，如何实现父组件向子组件传递数据（属性绑定），以及子组件如何向父组件传递数据和调用父组件的方法（事件发射）。通过示例代码展示了使用@Input和@Output装饰器进行双向通信的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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")
    }
}