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)文章
這篇文章主要介紹了詳解Vue2.0配置mint-ui踩過(guò)的那些坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
動(dòng)態(tài)加載權(quán)限管理模塊中的Vue組件
本篇文章給大家詳細(xì)講解了如何在權(quán)限管理模塊中動(dòng)態(tài)的加載VUE組件的過(guò)程，有這方面需求的朋友跟著學(xué)習(xí)下吧。2018-01-01
解決vue項(xiàng)目router切換太慢問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目router切換太慢問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue之插槽的內(nèi)容渲染問(wèn)題及解決過(guò)程
本文將探討這些常見(jiàn)問(wèn)題的原因,并提供相應(yīng)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁(yè)面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁(yè)面卡死的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能
這篇文章主要介紹了Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02![關(guān)于console.log打印結(jié)果是?[object?Object]的解決](http://img.jbzj.com/images/xgimg/bcimg7.png)
關(guān)于console.log打印結(jié)果是?[object?Object]的解決
這篇文章主要介紹了關(guān)于console.log打印結(jié)果是?[object?Object]的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
路由守衛(wèi)，簡(jiǎn)單理解來(lái)說(shuō)就是，當(dāng)用戶(hù)要進(jìn)行一些操作時(shí)，我需要用戶(hù)的一些信息或數(shù)據(jù)或行為，我判斷過(guò)后，才會(huì)同意用戶(hù)進(jìn)行操作，說(shuō)到這里，我想大家心里都或多或少有點(diǎn)理解了吧2023-01-01
這篇文章主要介紹了vue3如何使用pinia替代vuex問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03