如何在Vue.js組件使用v-on綁定自定義事件
本文章向大家介紹如何在Vue.js 組件使用v-on綁定自定義事件的基本知識點總結(jié)和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)平武免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
vue是什么軟件
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
每個 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ā)的事件。
{{ total }}
Vue.component('button-counter', {
template: '
{{ counter }}',
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
}
}
})跟著這個例子我來談?wù)劺斫?，更新以前我那種錯誤的思想
先畫出理解的步驟，跟著步驟來進行理解
步驟1：
大家先看到這里，其實在步驟4里面的自定義標簽經(jīng)過渲染之后是變成了如 步驟一 一樣的代碼，所以我們應(yī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ù)來回應(yīng)你”
這時我們回想步驟3，在子組件我們已經(jīng)使用emit來進行通知，所以，這樣就形成父子組件間的相互呼應(yīng)傳遞信息，其實在開發(fā)的過程中父子組件通訊也都是使用這樣的方法，父組件傳遞信息給子組件的時候會通過props參數(shù)，通常不會直接在子組件中修改父組件傳遞下來的信息，而且通過這樣的一個鉤子去通知父組件對某些參數(shù)進行改變
以上就是小編為大家?guī)淼娜绾卧赩ue.js 組件使用v-on綁定自定義事件的全部內(nèi)容了，希望大家多多支持創(chuàng)新互聯(lián)！
當前標題：如何在Vue.js組件使用v-on綁定自定義事件
當前地址：http://weahome.cn/article/jcesdj.html
重慶分公司
重慶分公司
