Vue組件綁定自定義事件

Vue組件使用v-on綁定自定義事件：
　　能夠分爲3步理解：
　　　　1.在組件模板中按照正常事件機制綁定事件：
　　　　　　template: '<button v-on:click="increment">{{ counter }}</button>',
　　　　　　如上，v-on:click就是用來給子組件綁定點擊事件的，這就是原生的自帶的事件，容易理解。
　　　　2.子組件的事件發生時，在事件函數中向父組件「報告」這一事件（使用$emit）：
　　　　　　methods: {
　　　　　　　　increment: function () {
　　　　　　　　　　this.counter += 1;
　　　　　　　　　　this.$emit('increment');
　　　　　　　　}
　　　　　　},
　　　　　　上面事件函數中的代碼this.$emit('increment')的意思就是向父組件報告，本身發生了‘increment’事件。至於發生的事件叫什麼名字，能夠隨意取名，只要在父組件中綁定時名稱一致便可。
　　　　3.父組件在使用時，明確使用v-on綁定子組件傳來的事件：
　　　　　　<button-counter v-on:increment="incrementTotal"></button-counter>
　　　　　　上方的v-on：increment就是綁定的子組件的increment事件。
　　　　　　經常使用語父組件中的數據變化與子組件的操做有關的狀況。