angular6 子组件向父组件通讯

子组件向父组件传值

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);
  ... ...
}
复制代码

• 坑点： fromChildFunc( $event ) 参数必须为 $event

  这么作的缘由是避免与本组件的同名变量发生冲突

• 参考：组件之间的交互