关于Vue中$on和$emit的说明

最近在看Vue2.x的文档，发现对于$on和$emit的说明不是很清楚，不是很理解，后请教大神后才明白，特在此记录并加上本身的理解。

Vue2.x中对于$on和$emit的解释是：

$on(eventName):监听事件；

$emit(eventName,optionalPayload) 触发事件；

可能理解事后以为说得挺对，可是对于像我这般初学者就不是很理解，话很少说，举个栗子来讲明这两者的用法，仍是以文档的例子来作说明

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

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

首先用v-on而不是用$on是由于父组件监控子组件事件时是使用v-on而不是$on，v-on:increment是父组件监控子组件的increment事件，子组件里有个点击事件incrementCounter，该点击事件函数中有个this.$emit（'increment'），这个是触发increment事件，当子组件里的click事件被触发，执行事件函数incrementCounter，那么子组件里的increment事件就会被触发，此时父组件的increment事件就被触发了，就会执行incrementTotal事件函数。区分清楚事件和事件函数就会很好理解，这里的increment就像是一个抽象的click同样，是一个事件，click是默认鼠标点击后会触发点击事件的事件函数，increment就是咱们本身定义的一个事件，经过$emit来触发，$emit(eventName,optionalPayload)的第二个参数是传递给监控事件的事件函数的参数。

再看下一个栗子：

<div id="message-event-example" class="demo">
  <p v-for="msg in messages">{{ msg }}</p>
  <button-message v-on:message="handleMessage"></button-message>
</div>

Vue.component('button-message', {
  template: `<div>
    <input type="text" v-model="message" />
    <button v-on:click="handleSendMessage">Send</button>
  </div>`,
  data: function () {
    return {
      message: 'test message'
    }
  },
  methods: {
    handleSendMessage: function () {
      this.$emit('message', { message: this.message })
    }
  }
})

new Vue({
  el: '#message-event-example',
  data: {
    messages: []
  },
  methods: {
    handleMessage: function (payload) {
      this.messages.push(payload.message)
    }
  }
})

这个栗子主要用于说明$emit（eventName，optionalPayload）的第二个参数的用法，如上面所说，optionalPayload是传递给监控这个事件的事件函数的参数，即message函数被触发后，{message：this.message}这个对象会被传递到v-on监控的message事件的事件函数handleMessage的参数中，那么this.message就会被传递给handleMessage中的payload参数。

查阅了不少关于$on和$emit的用法，都不很详细，在此记录一下我的的理解，一来加深下本身理解，二能够帮到他人也是很高兴的一件事，若有不正确的地方，望指出。