vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明
主要想說(shuō)下非父子組件之間的通信。
項(xiàng)目場(chǎng)景:
在app.vue里寫(xiě)了一個(gè)公共的頂部導(dǎo)航navbar,然后右側(cè)有個(gè)分享按鈕,而這個(gè)分享按鈕只有在特定的頁(yè)面才展示,項(xiàng)目里是在lottery.vue頁(yè)面,然后想實(shí)現(xiàn)app.vue里點(diǎn)擊分享按鈕,觸發(fā)lottery.vue里的分享方法。
解決:使用eventBus
1、創(chuàng)建一個(gè)event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
2、在app.vue引入eventbus,點(diǎn)擊分享按鈕時(shí)觸發(fā)方法
import { EventBus } from '@/tools/event-bus' onClickRight () { EventBus.$emit('handleLotteryShare') }
3、在lottery.vue引入eventBus,在mounted里監(jiān)聽(tīng)
import { EventBus } from '@/tools/event-bus' mounted () { EventBus.$on('handleLotteryShare', () => { this.doShare() }) },
4、到此解決了。但是,但是,出bug了,每多點(diǎn)擊一次,分享的彈窗的蒙層顏色就更深一層。然后一頭霧水,以為是原生app里api的bug,跑去問(wèn)他們,結(jié)果尷尬了,并不是,而是調(diào)了多次分享接口。
然后就發(fā)現(xiàn)應(yīng)該跟eventBus有關(guān),上網(wǎng)搜索了下,原來(lái)eventBus用完要記得解綁。加上以下代碼解決了。
created () { // 解綁bus EventBus.$off('handleLotteryShare') }
使用eventBus注意事項(xiàng):要記得解綁?。ventBus.$off('handleLotteryShare')。
補(bǔ)充知識(shí):vue前端兄弟組件或任意兩個(gè)組件之間進(jìn)行傳值可以使用eventbus
具體使用流程如下:
1、定義一個(gè)js文件,引入Vue
2、在需要使用eventbus的組件中引入步驟1創(chuàng)建的js文件
bus.$emit進(jìn)行傳值
3、在另一個(gè)組件中使用bus.$on進(jìn)行接收
其中,msg即為步驟2中emit攜帶的參數(shù)“123”
以上這篇vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法(基于 vue + AntDesign)
這篇文章主要介紹了Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法,該項(xiàng)目是基于 vue + AntDesign的,具體實(shí)例代碼給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2019-11-11解決mpvue + vuex 開(kāi)發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用問(wèn)題
這篇文章主要介紹了解決mpvue + vuex 開(kāi)發(fā)微信小程序 vuex輔助函數(shù)mapState、mapGetters不可用問(wèn)題,需要的朋友可以參考下2018-08-08vue實(shí)現(xiàn)文字橫向無(wú)縫走馬燈組件效果的實(shí)例代碼
這篇文章主要介紹了vue 文字橫向無(wú)縫走馬燈組件的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue初嘗試--項(xiàng)目結(jié)構(gòu)(推薦)
這篇文章主要介紹了vue初嘗試--項(xiàng)目結(jié)構(gòu)的相關(guān)知識(shí),需要的朋友可以參考下2018-01-01vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案
這篇文章主要介紹了vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04使用vue3+ts+setup獲取全局變量getCurrentInstance的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于使用vue3+ts+setup獲取全局變量getCurrentInstance的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-08-08