vue組件中傳值EventBus的使用及注意事項(xiàng)說明
主要想說下非父子組件之間的通信。
項(xiàng)目場景：
在app.vue里寫了一個公共的頂部導(dǎo)航navbar，然后右側(cè)有個分享按鈕，而這個分享按鈕只有在特定的頁面才展示，項(xiàng)目里是在lottery.vue頁面，然后想實(shí)現(xiàn)app.vue里點(diǎn)擊分享按鈕，觸發(fā)lottery.vue里的分享方法。
解決：使用eventBus
1、創(chuàng)建一個event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
2、在app.vue引入eventbus，點(diǎn)擊分享按鈕時觸發(fā)方法
import { EventBus } from '@/tools/event-bus'
onClickRight () {
EventBus.$emit('handleLotteryShare')
}
3、在lottery.vue引入eventBus，在mounted里監(jiān)聽
import { EventBus } from '@/tools/event-bus'
mounted () {
EventBus.$on('handleLotteryShare', () => {
this.doShare()
})
},
4、到此解決了。但是，但是，出bug了，每多點(diǎn)擊一次，分享的彈窗的蒙層顏色就更深一層。然后一頭霧水，以為是原生app里api的bug，跑去問他們，結(jié)果尷尬了，并不是，而是調(diào)了多次分享接口。
然后就發(fā)現(xiàn)應(yīng)該跟eventBus有關(guān)，上網(wǎng)搜索了下，原來eventBus用完要記得解綁。加上以下代碼解決了。
created () {
// 解綁bus
EventBus.$off('handleLotteryShare')
}
使用eventBus注意事項(xiàng)：要記得解綁??！EventBus.$off('handleLotteryShare')。
補(bǔ)充知識：vue前端兄弟組件或任意兩個組件之間進(jìn)行傳值可以使用eventbus
具體使用流程如下：
1、定義一個js文件，引入Vue
2、在需要使用eventbus的組件中引入步驟1創(chuàng)建的js文件
bus.$emit進(jìn)行傳值
3、在另一個組件中使用bus.$on進(jìn)行接收
其中，msg即為步驟2中emit攜帶的參數(shù)“123”
以上這篇vue組件中傳值EventBus的使用及注意事項(xiàng)說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue2.0配置mint-ui踩過的那些坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
本篇文章給大家詳細(xì)講解了如何在權(quán)限管理模塊中動態(tài)的加載VUE組件的過程，有這方面需求的朋友跟著學(xué)習(xí)下吧。2018-01-01
這篇文章主要介紹了解決vue項(xiàng)目router切換太慢問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文將探討這些常見問題的原因,并提供相應(yīng)的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能
這篇文章主要介紹了Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下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]的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
路由守衛(wèi)，簡單理解來說就是，當(dāng)用戶要進(jìn)行一些操作時，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會同意用戶進(jìn)行操作，說到這里，我想大家心里都或多或少有點(diǎn)理解了吧2023-01-01
這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03