關於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的用法，都不很詳細，在此記錄一下我的的理解，一來加深下本身理解，二能夠幫到他人也是很高興的一件事，若有不正確的地方，望指出。