vue bus全局事件中心簡單Demo詳解
1.vue-cli搭建好項(xiàng)目之后,使用npm安裝vue-bus
npm install vue-bus
2.在入口文件main.js中全局注冊
import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus);
3.傳遞數(shù)據(jù):
this.$bus.emit("eventName",data)
4.接收數(shù)據(jù):
this.$bus.on("eventName",data)
5.注意事項(xiàng)
this的作用域要指向當(dāng)前的vm實(shí)例,on監(jiān)聽事件一般放在組件生命周期函數(shù)中的created或者mounted中,注銷bus需要在beforeDestroy中;
關(guān)于bus事件觸發(fā)多次的問題,一方面可能因?yàn)関ue組件被復(fù)用,導(dǎo)致一個(gè)bus事件被重復(fù)注冊,破壞了“同事件名”bus,發(fā)送與接收唯一對應(yīng)的關(guān)系;
另一方面是頁面路由的時(shí)候,原有頁面中的bus事件并沒有被注銷,依然隱藏在程序中。
總結(jié)
以上所述是小編給大家介紹的vue bus全局事件中心簡單Demo詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式
這篇文章主要介紹了vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)
這篇文章主要為大家介紹了創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Vue 實(shí)現(xiàn)從小到大的橫向滑動效果詳解
這篇文章主要介紹了Vue 實(shí)現(xiàn)從小到大的橫向滑動效果,結(jié)合實(shí)例形式詳細(xì)分析了vue.js橫向漸變滑動效果的實(shí)現(xiàn)步驟、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-10-10解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09使用Vue3和ApexCharts實(shí)現(xiàn)交互式3D折線圖
ApexCharts 是一個(gè)功能強(qiáng)大的 JavaScript 庫,用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過 vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11