何时使用@ViewChild、@Input 和@Output？答案

【问题标题】：When to use @ViewChild, @Input and @Output?何时使用@ViewChild、@Input 和@Output？
【发布时间】：2019-10-19 19:16:15
【问题描述】：

何时使用 ViewChild、输入和输出？既然使用 ViewChild 可以实现类的所有属性，那么为什么要使用 Input 和 Output。

在简单的场景中输入和输出是最好的。但我有 4 到 5 级的组件深度层次结构。在这种情况下，我应该使用 ViewChild 还是使用 Input 将数据传输到最后一个组件并使用 Output 将事件返回到顶部组件？

它们三者如何影响应用程序的性能？

【问题讨论】：

【解决方案1】：

@ViewChild：
我们可以使用viewchild 来访问原生元素属性。例如：如果我想在渲染组件时实现点击事件，那么我必须使用@ViewChild。

@ViewCild('refDiv'): refDiv = ElementRef;

ngOnInit() {
   this.refDiv.nativeElement.click();
}

divClick() {
  console.log('div is clicked!!!');
}

HTML

<div #refDiv (click)="divClick()"> 
</div>

@Input 如果我们有两个组件并且都具有父子关系，并且我们想在这种情况下将数据从父级传递给子级，我们可以使用@Input。

@输出 如果我们有两个组件并且都具有父子关系，并且我们想将数据从子传递给父，那么在这种情况下我们可以使用@Output。

【讨论】：

好的，用例很清楚，但是您将如何定义性能。由于大部分工作都可以使用 ViewChild 轻松完成？如果我有 100 个组件，并且到处都在使用 ViewChild，那么它会影响性能吗？
不，对性能没有影响，因为当某些事件发生时我们正在访问该值并且也没有内存泄漏的机会

【解决方案2】：

通过父子组件，我会使用输入和输出。但是到 2 级或更多时，我会使用服务。然后你可以编写 setter 和 getter 方法。其他一切都很难维护，并且很容易出现错误

【讨论】：