vue bus全局事件中心簡(jiǎn)單Demo詳解
1.vue-cli搭建好項(xiàng)目之后，使用npm安裝vue-bus
npm install vue-bus
2.在入口文件main.js中全局注冊(cè)
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ā)多次的問(wèn)題，一方面可能因?yàn)関ue組件被復(fù)用，導(dǎo)致一個(gè)bus事件被重復(fù)注冊(cè)，破壞了“同事件名”bus，發(fā)送與接收唯一對(duì)應(yīng)的關(guān)系；
另一方面是頁(yè)面路由的時(shí)候，原有頁(yè)面中的bus事件并沒(méi)有被注銷，依然隱藏在程序中。
總結(jié)
以上所述是小編給大家介紹的vue bus全局事件中心簡(jiǎn)單Demo詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3?使用?vue3-video-play實(shí)現(xiàn)在線視頻播放
這篇文章主要介紹了vue3?使用?vue3-video-play?進(jìn)行在線視頻播放,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
詳解vue3.2新增的defineCustomElement底層原理
本文主要介紹了vue3.2新增的defineCustomElement底層原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)
這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于在vue中如何使用node.js的相關(guān)資料,vue和nodejs經(jīng)常讓新手們感到困惑,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過(guò)實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
VUE:vuex 用戶登錄信息的數(shù)據(jù)寫入與獲取方式
今天小編就為大家分享一篇VUE:vuex 用戶登錄信息的數(shù)據(jù)寫入與獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
element-UI el-table修改input值視圖不更新問(wèn)題
這篇文章主要介紹了element-UI el-table修改input值視圖不更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02