自定义事件

1.使用v-on绑定自定义事件

每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

<button-counter v-on:increment="incrementTotal"></button-counter>
//监听事件

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
 //触发事件
    }
  },
})
new Vue({
  el: '#counter-event-example',
  methods: {
    incrementTotal: function () {
...}
  }
})