Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

<!--自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件-->
<div id="app15">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>

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

怎么来看上面的触发事件$emit(eventName)呢。

1.Vue.component注册了一个组件，名称叫button-counter，template中是组件内容，data中定义一个方法返回counter。

2.methods中定义的一个方法，incrementHandler是方法的名称，而方法中this.$emit('increment')是触发了increment对应v-on:increment。

3.v-on:increment又执行了方法incrementTotal，所以才能点击的时候Total才会跟着加。而第一个按钮就没执行v-on:increment，所以Total不变。