前面的話

父組件使用props傳遞數據給子組件，子組件怎么跟父組件通信呢？這時，Vue的自定義事件就派上用場了。本文將詳細介紹Vue自定義事件

事件綁定

每個 Vue 實例都實現了事件接口 (Events interface)，即

使用 $on(eventName) 監聽事件使用 $emit(eventName) 觸發事件

[注意]Vue 的事件系統分離自瀏覽器的EventTarget API。盡管它們的運行類似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的別名

另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件

[注意]不能用 $on 偵聽子組件拋出的事件，而必須在模板里直接用 v-on 綁定

<div id="example"> <parent></parent></div>

<script>var childNode = { template: `<button @click="incrementCounter">{{ counter }}</button>`, data(){  return {   counter: 0  } }, methods:{  incrementCounter(){   this.counter ++;   this.$emit('increment');  } },}var parentNode = { template: ` <div class="parent">  <p>{{total}}</p>  <child @increment="incrementTotal"></child>  <child @increment="incrementTotal"></child> </div> `, components: {  'child': childNode }, data(){  return {   'total':0  } }, methods:{  incrementTotal(){   this.total ++;  } }};// 創建根實例new Vue({ el: '#example', components: {  'parent': parentNode }})</script>

命名約定

自定義事件的命名約定與組件注冊及props的命名約定都不相同，由于自定義事件實質上也是屬于HTML的屬性，所以其在HTML模板中，最好使用中劃線形式

<child @pass-data="getData"></child>

而子組件中觸發事件時，同樣使用中劃線形式

 this.$emit('pass-data',this.childMsg)

數據傳遞

子組件通過$emit可以觸發事件，第一個參數為要觸發的事件，第二個事件為要傳遞的數據

this.$emit('pass-data',this.childMsg)

父組件通過$on監聽事件，事件處理函數的參數則為接收的數據

getData(value){   this.msg = value;}

<div id="example"> <parent></parent></div>

<script>var childNode = { template: ` <div class="child">  <div>   <span>子組件數據</span>   <input v-model="childMsg" @input="data">  </div>  <p>{{childMsg}}</p> </div> `, data(){  return{   childMsg:''  } }, methods:{  data(){   this.$emit('pass-data',this.childMsg)  } }}var parentNode = { template: ` <div class="parent">  <div>   <span>父組件數據</span>   <input v-model="msg">  </div>  <p>{{msg}}</p>  <child @pass-data="getData"></child> </div> `, components: {  'child': childNode }, data(){  return {   'msg':'match'  } }, methods:{  getData(value){   this.msg = value;  } }};// 創建根實例new Vue({ el: '#example', components: {  'parent': parentNode }})</script>