淺談Vue.js 組件中的v-on綁定自定義事件理解

更新時間：2017年11月17日 11:37:12 作者：hello_錦泰

這篇文章主要介紹了淺談Vue.js 組件中的v-on綁定自定義事件理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

使用 $on(eventName) 監(jiān)聽事件

使用 $emit(eventName) 觸發(fā)事件

Vue的事件系統(tǒng)分離自瀏覽器的EventTarget API。盡管它們的運行類似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的別名。

另外，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。

下面是一個文檔上面的例子：

2017年4月11日更新

<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="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

跟著這個例子我來談談理解，更新以前我那種錯誤的思想

先畫出理解的步驟，跟著步驟來進行理解

步驟1：

大家先看到這里，其實在步驟4里面的自定義標簽經(jīng)過渲染之后是變成了如步驟一一樣的代碼，所以我們應該從這里入手理解父子組件間事件綁定。在子組件里面把點擊事件（click）綁定給了函數(shù)increment（即圖片里面的步驟2），這里容易理解，即點擊了子組件的按鈕將會觸發(fā)位于子組件的increment函數(shù)

步驟2與步驟3：

increment函數(shù)被觸發(fā)執(zhí)行，在步驟2里面執(zhí)行了一句調(diào)用函數(shù)的語句

this.$emit('increment')

我們來看一下文檔

vm.$emit( event, […args] ) ：觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)

在這里是什么意思呢？按我自己的大白話就是這樣說的：

通過這句函數(shù)可以讓父組件知道子組件調(diào)用了什么函數(shù)，this.$emit(‘increment') 即類似于子組件跟父組件說了一聲“hi，爸爸我調(diào)用了我自己的increment函數(shù)”，通知父組件

步驟4：

回看一下在父組件里面定義的自定義標簽，可以看到

v-on:increment="incrementTotal"

什么意思呢？我們還是用大白話來解釋一下

就是說“孩子，當你調(diào)用了increment函數(shù)的時候，我將調(diào)用incrementTotal函數(shù)來回應你”

這時我們回想步驟3，在子組件我們已經(jīng)使用emit來進行通知，所以，這樣就形成父子組件間的相互呼應傳遞信息，其實在開發(fā)的過程中父子組件通訊也都是使用這樣的方法，父組件傳遞信息給子組件的時候會通過props參數(shù)，通常不會直接在子組件中修改父組件傳遞下來的信息，而且通過這樣的一個鉤子去通知父組件對某些參數(shù)進行改變

步驟5：

這個就容易理解了，上一版本是本人在初學的時候?qū)懙乃运季S很不嚴謹，抱歉，歡迎大家指導批評

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: