父子元件使用$emit和v-on時，子元件使用$emit觸發，父元件在例項中v-on自定義事件監聽。

注意：父元件監聽子元件觸發的事件，不能用$on偵聽子元件丟擲的事件，而必須在模板裡直接用v-on繫結。

下面是官方文件給出的例子：

HTML：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment1="incrementTotal"></button-counter>
  <button-counter v-on:increment1="incrementTotal"></button-counter>
</div>
 

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1 //元件模板中的counter
      this.$emit('increment1')//觸發自定義事件，這裡的引數是自定義事件名稱
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1  //父例項下的total
    }
  }
})