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