angular6 子组件向父组件通信

最新推荐文章于 2025-02-17 18:27:43 发布

weixin_34082789

最新推荐文章于 2025-02-17 18:27:43 发布

阅读量586

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b647324e51d453489495772

本文介绍Angular6中子组件如何通过触发emit事件的方式向父组件传递数据。具体实现包括在子组件中导入EventEmitter并声明输出实例，在父组件中定义处理函数接收子组件传来的值。

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

子组件向父组件传值

in Angular 6. 子组件以 ==触发emit事件方式== 将数据传给父组件。

子组件中：

// js
import {Output,EventEmitter}from '@angular/core'

// 子组件中申请输出实例
@Output fromChild = new EventEmitter();

... ...
// 发送数据
fromChild.emit(data);
复制代码

假如子组件的标签为：

父模块中：

将子组件用在父组件中，使用(fromChild)来传递emit函数

// html     fromChild 定义在子组件中
<app-child (fromChild)="fromChildFunc($event)" ></app-child>


// js       fromChildFunc 处理处理从子组件接受到的值
fromChildFunc(data) {
  console.log(data);
  ... ...
}
复制代码