js change事件 获取新值和旧值_复习之Vue用$emit方法监听组件事件

当我们需要在组件上监听点击事件时，直接在组件a-cmp上添加 @Click 事件是没有用的，如：

当我们监听到a-cmp组件点击事件之后，需要打印出‘监听了组件事件’。

<

可以发现，当我们点击了a-cmp组件之后，弹出了‘点击组件’的框，但是控制台并没有打印出‘监听了组件事件’。也就是说，我们并没有监听到组件的点击事件。

因为，我们监听的是组件的自定义事件，而不是原生click事件。

那么怎样才能监听到组件的事件呢？

利用$emit方法，如：

<

利用$emit方法，我们就可以监听到组件的事件了。

$emit 的第二个参数：

<

$emit抛出的事件名规定：

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所有的名称。

如果触发一个camelCase名字的事件，则监听这个名字的kabab-case版本是不会有任何效果的。

与组件和prop不同的是，事件名不会被当作一个 JS 变量名或者属性名，所以就没有理由使用camelCase 或 PascalCase 了。

并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写，所以 @myEvent 将会变成 @myevent，导致 myEvent 不可能被监听到。

因此，推荐**始终使用 kebab-case 的事件名**。