为什么我们需要在Angular中使用“ $ event”关键字进行事件绑定？ （用于输出）

Question

考虑以下代码（来自here）：

父组件：

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `<app-child (valueChange)='displayCounter($event)'></app-child>`
})
export class AppComponent implements OnInit {
    ngOnInit() {
    }
    displayCounter(count) {
        console.log(count);
    }
}

子组件：

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-child',
    template: `<button class='btn btn-primary' (click)="valueChanged()">Click me</button> `
})
export class AppChildComponent {
    @Output() valueChange = new EventEmitter();
    Counter = 0;
    valueChanged() { // You can give any function name
        this.counter = this.counter + 1;
        this.valueChange.emit(this.counter);
    }
}

正如您在父组件中看到的那样，我们使用displayCounter($event)来接收子组件发出的数据。

我的问题是为什么我们必须为此使用$event关键字？
如果我尝试将displayCounter($event)更改为displayCounter(count)，它将无法正常工作。 但是，我可以将方法的名称从displayCounter更改为myAwesomeDisplayCounter。 通常，javascript中的函数没有设置参数名称，因此我对Angular中为什么会出现这种情况感到困惑。

有人可以解释吗？或链接说明此限制的文章？

Answer 1

  

JavaScript中的函数通常没有设置参数名称，因此我对为什么在Angular中遇到这种情况感到困惑。

未设置参数名称，但这不是参数名称-它是现有变量的名称，该变量由Angular自动生成。如果您尝试将其更改为其他内容，那么它将不起作用，因为您不再指向该现有对象。与此类似：

const $event = {/* insert object details here */}
displayCounter(count)

很显然，您无法执行此操作，因为尚未定义count变量。唯一的区别是Angular会自动为您创建$event变量。

关于为什么它必须是这个确切的词，它并没有什么特殊的JavaScript含义，这正是开发Angular的人们选择用来标识其自动生成的事件对象的原因。

为进一步阅读，this question详细介绍了$event对象以及如何在Angular中传递事件参数。