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