您好,登錄后才能下訂單哦!
本文章向大家介紹如何在Vue.js 組件使用v-on綁定自定義事件的基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng),具有一定的參考價(jià)值,需要的朋友可以參考一下。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface),即:
使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件
Vue的事件系統(tǒng)分離自瀏覽器的EventTarget API。盡管它們的運(yùn)行類似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的別名。
另外,父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。
<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 } } })
跟著這個(gè)例子我來談?wù)劺斫?,更新以前我那種錯(cuò)誤的思想
先畫出理解的步驟,跟著步驟來進(jìn)行理解
步驟1:
大家先看到這里,其實(shí)在步驟4里面的自定義標(biāo)簽經(jīng)過渲染之后是變成了如 步驟一 一樣的代碼,所以我們應(yīng)該從這里入手理解父子組件間事件綁定。在子組件里面把點(diǎn)擊事件(click)綁定給了函數(shù)increment(即圖片里面的步驟2),這里容易理解,即點(diǎn)擊了子組件的按鈕將會(huì)觸發(fā)位于子組件的increment函數(shù)
步驟2與步驟3:
increment函數(shù)被觸發(fā)執(zhí)行,在步驟2里面執(zhí)行了一句調(diào)用函數(shù)的語句
this.$emit('increment')
我們來看一下文檔
vm.$emit( event, […args] ) : 觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)
在這里是什么意思呢?按我自己的大白話就是這樣說的:
通過這句函數(shù)可以讓父組件知道子組件調(diào)用了什么函數(shù),this.$emit(‘increment') 即類似于子組件跟父組件說了一聲“hi,爸爸 我調(diào)用了我自己的increment函數(shù)”,通知父組件
步驟4:
回看一下在父組件里面定義的自定義標(biāo)簽,可以看到
v-on:increment="incrementTotal"
什么意思呢?我們還是用大白話來解釋一下
就是說“孩子,當(dāng)你調(diào)用了increment函數(shù)的時(shí)候,我將調(diào)用incrementTotal函數(shù)來回應(yīng)你”
這時(shí)我們回想步驟3,在子組件我們已經(jīng)使用emit來進(jìn)行通知,所以,這樣就形成父子組件間的相互呼應(yīng)傳遞信息,其實(shí)在開發(fā)的過程中父子組件通訊也都是使用這樣的方法,父組件傳遞信息給子組件的時(shí)候會(huì)通過props參數(shù),通常不會(huì)直接在子組件中修改父組件傳遞下來的信息,而且通過這樣的一個(gè)鉤子去通知父組件對(duì)某些參數(shù)進(jìn)行改變
以上就是小編為大家?guī)淼娜绾卧赩ue.js 組件使用v-on綁定自定義事件的全部內(nèi)容了,希望大家多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。