监听子组件事件

子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件，父组件可以监听这个事件：

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

还可以使用 $emit 的第二个参数来提供一个值：

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

在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

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

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

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

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

参考地址