Angular新手疑问：已有@Output为何还需使用ViewChild()？

@Output 和 ViewChild 虽然都涉及父子组件交互，但定位和使用场景完全不同，核心区别在于「数据/操作的发起方」和「组件耦合方式」：

1. @Output：子组件主动向父组件传递事件/数据 #

@Output 是子组件驱动的通信方式：子组件在特定时机（比如用户点击、状态变化）主动抛出事件，父组件监听这个事件并做响应。这种方式完全符合 Angular 单向数据流的设计原则，子组件不需要知道父组件的存在，只负责暴露事件，耦合度极低。

举个典型场景：

• 子组件是一个自定义表单组件，当表单验证通过时，用 @Output 抛出验证成功的事件：

  // 子组件
  @Output() formValidated = new EventEmitter<FormData>();
  
  onSubmit() {
    if (this.form.valid) {
      this.formValidated.emit(this.form.value);
    }
  }
  

• 父组件只需在模板中监听事件，无需主动操作子组件：

  <!-- 父组件模板 -->
  <app-custom-form (formValidated)="handleFormValid($event)"></app-custom-form>
  

2. ViewChild：父组件主动控制子组件 #

ViewChild 是父组件驱动的交互方式：父组件直接获取子组件的实例，从而读取子组件的属性、调用子组件的方法。这种场景下，@Output 完全无法满足——因为@Output是子组件主动发消息，而这里是父组件需要主动「拉取信息」或「下发指令」。

举个典型场景：

• 子组件有一个重置表单的方法，父组件需要在点击自己的按钮时触发这个方法：

  // 子组件
  resetForm() {
    this.form.reset();
  }
  

• 父组件通过 ViewChild 获取子组件实例，主动调用方法：

  // 父组件
  @ViewChild(CustomFormComponent) customForm!: CustomFormComponent;
  
  onResetClick() {
    this.customForm.resetForm();
  }
  

关键设计原则 #

• 优先用 @Output：它遵循单向数据流，组件解耦性好，是 Angular 推荐的父子通信方式。
• 谨慎用 ViewChild：它会让父子组件耦合度升高，只有当父组件必须主动控制子组件时才使用（比如调用子组件方法、读取子组件内部状态）。

内容的提问来源于stack exchange，提问作者Rahul Aggarwal