關(guān)于vue.js中this.$emit的理解使用
一、每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口
即:
1、使用 $on(eventName) 監(jiān)聽事件
2、使用 $emit(eventName, optionalPayload) 觸發(fā)事件
二、注意事項(xiàng)
1、父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件
2、不能用 $on 監(jiān)聽子組件釋放的事件,而必須在模板里直接用 v-on 綁定
三、例子及說明
1、父組件代碼及說明
<template> ? <div> ? ? <p>{{ total }}</p> ? ? <my-button4 @increment1="incrementTotal1"></my-button4> ? ? <!--自定義方法increment1監(jiān)聽子組件觸發(fā)情況--> ? ? <my-button4 @increment2="incrementTotal2"></my-button4> ? ? <!--自定義方法increment2監(jiān)聽子組件觸發(fā)情況--> ? </div> </template> <script> ? import myButton4 from './components/myButton4.vue' ? export default{ ? ? data(){ ? ? ? return{ ? ? ? ? ? total:0 ? ? ? } ? ? }, ? ? methods:{ ? ? ? incrementTotal1: function () { ? ? ? ? ? ? ? ? ? ? /*事件incrementTotal觸發(fā)*/ ? ? ? ? this.total += 1 ? ? ? }, ? ? ? incrementTotal2: function () { ? ? ? ? ? ? ? ? ? ?/*事件incrementTota2觸發(fā)*/ ? ? ? ? this.total += 2 ? ? ? } ? ? }, ? ? components:{ ? ? ? ? ? ? ? ? ? ? ? ?/*子組件的實(shí)例,要盡量放在最后,不然會(huì)出現(xiàn)一些不必要的問題*/ ? ? ? myButton4 ? ? } ? } </script>
2、子組件代碼及說明
<template> ? ? ? <button @click="incrementCounter">{{counter}}</button> <!--在子組件中創(chuàng)建一個(gè)按鈕,創(chuàng)建點(diǎn)擊事件--> </template> <script> ? ?export default{ ? ? ?data(){ ? ? ? ?return{ ? ? ? ? ?counter: 0 ? ? ? ?} ? ? ?}, ? ? ?methods: { ? ? ? ?incrementCounter: function (){ ? ? ? ? ?this.counter += 1 ? ? ? ? ?this.$emit('increment1') ? ? ? ?/*觸發(fā)自定義事件increment1,也就是父組件中的incrementTotal1事件*/ ? ? ? ? ?this.$emit('increment2') ? ? ? ?/*觸發(fā)自定義事件increment2,也就是父組件中的incrementTotal2事件*/ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/*這兩個(gè)事件一次只會(huì)觸發(fā)一個(gè),為什么呢?很簡單,因?yàn)槊看沃粏螕粢粋€(gè)按鈕*/ ? ? ? ?} ? ? ?} ? ?} </script>
3、運(yùn)行截圖
A、開始截圖:
B、點(diǎn)擊第一個(gè)按鈕截圖(+1)
C、點(diǎn)擊第二個(gè)按鈕截圖(+2)
四、總說明
1、首先看子組件件,按鈕中給其綁定了方法:incrementCounter;
2、點(diǎn)擊button時(shí)會(huì)執(zhí)行函數(shù) incrementCounter,increment中有 this.$emit(‘increment1)和this.$emit(‘increment2),看點(diǎn)擊的是哪個(gè)按鈕就執(zhí)行哪個(gè);
3、當(dāng)incrementCounter執(zhí)行時(shí),就會(huì)觸發(fā)自定函數(shù)increment1(點(diǎn)擊第一個(gè)按鈕的時(shí)候)或者increment(點(diǎn)擊第二個(gè)按鈕的時(shí)候),也就是incrementTotal1或者incrementTotal2函數(shù);
到此這篇關(guān)于關(guān)于vue.js中this.$emit的理解使用的文章就介紹到這了,更多相關(guān)vue.js this.$emit內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息
本篇文章主要介紹了詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡單攻略,這里整理了詳細(xì)的步驟,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)(附源碼)
這篇文章主要介紹了利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,,文中給出了詳細(xì)的介紹與示例代碼,并在文章結(jié)尾給出了完整的項(xiàng)目下載,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02vue開發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案
這篇文章主要介紹了vue開發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07