input js 离开事件_Vue.js从零开始——组件（3）

今天这一章节，主要看看组件的自定义事件，其实上一个章节里面，监听子组件事件这节，可以算是自定义事件的一部分了，当然是比较基础的部分，接下来就稍稍深入一些。

---

1 子组件事件的接收

之前一个章节，用到了通过按钮放大文章字号的功能（组件（2）），效果如下图：

是在 HTML 内通过如下代码实现了控制增大多少的功能：

<!-- 这里在调用模板的时候，新增了一个监听器 enlarge-text -->
<article-post
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
  :body="post.body"
  @enlarge-text="postFontSize += 0.1"
></article-post>

这个时候我们把每一次增大的值放在子组件上是否更合理呢？这就涉及到了如何传递子组件的事件数据了，如果还记得 $emit() 这个方法，之前我们通过它的第一个参数传入了事件名称，那么接下来就用到了它的第二个参数：

<button @click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

这里把每次点击按钮后需要增大的数值作为了第二个参数，那么调用的时候，就需要修改一下方式了，我们可以通过 $event 来获取到子组件抛出的这个值：

<article-post
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
  :body="post.body"
  @enlarge-text="postFontSize += $event"
></article-post>

或者，如果这个事件处理函数是一个方法：

<article-post
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
  :body="post.body"
  @enlarge-text="onEnlargeText"
></article-post>

那么这个值将会作为第一个参数传入这个方法：

methods: {
    
  onEnlargeText: function(enlargeAmount) {
    
    this.postFontSize += enlargeAmount
  }
}

这样一来，就降低了我们很多从原模版获取参数，赋值给变量并最终传递给母元素的过程了。

2 事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换，所触发的事件名需要完全匹配监听这个事件所用的名称，比如下面的例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<!-- 没有效果 -->
<my-component @my-event="doSomething"></my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了，并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:m