Vue?eventBus事件總線封裝后再用的方式
前言
現(xiàn)在的項目中是不是在使用 eventbus 的時候，還有很多人都是直接創(chuàng)建一個vue 實例直接使用的，哪里需要哪里引入，而沒有簡單的處理下。接下來就先說下這種方式。
空vue實例構建的事件總線
在改造一個項目的時候就發(fā)現(xiàn)，里面的 bus.js 文件中就是這么處理的。兩行代碼搞定。
import Vue from "vue"; export default new Vue()
使用的時候，就沒那么簡單了，有這么一個空的容器，在需要傳值的組件里就得引入這個文件。然后通過 bus.on()綁定事件，通過bus.on() 綁定事件，通過 bus.on()綁定事件，通過bus.emit()進行分發(fā)事件。
import bus from'@/utils/bus'
// 綁定事件
bus.$on('event',()=>{....})
// 監(jiān)聽事件
bus.$emit('event',this.tasks)
這種方式使用起來也簡單但也不太方便，畢竟到處都要引入下，那有沒有什么辦法可以解決呢。繼續(xù)...
簡單的方式
先來個簡單的吧，雖然看上去有點不太習慣，但的確也挺好使的，而且直接掛載到vue實例上，哪里用哪里直接 this 即可，相對來說方便多了，不用到處引入文件了。掛載方式如下：
new Vue({
beforeCreate() {
// 盡量早地執(zhí)行掛載全局事件總線對象的操作
Vue.prototype.$bus = this;
},
router,
store,
render: h => h(App)
}).$mount('#app');
這種方式雖然掛載簡單，但是使用上還是有點不能盡如人意，不信你看：
// 綁定事件
this.$bus.$on('send', ()=>{ // 使用事件 });
// 分發(fā)事件
this.$bus.$emit('send', 'emit');
猛地一看，這不挺好的么，挺簡單的?。】墒俏矣袧嶑痹趺崔k，我有強迫癥怎么辦，我就不想看到兩個 $符怎么辦我就只想要下面的這種方式的：
// 綁定事件
this.$bus.on('send', ()=>{ // 使用事件 });
// 分發(fā)事件
this.$bus.emit('send', 'emit');
那你說，人家都是 $on、$emit的用的，怎么就不行了啊，實在不行就自己改造個吧，說干就干，who 怕 who，安排！
復雜又簡單的方式
先構思下，想要個什么樣效果的，比如，我不想要用的時候都要引入下文件，要一次引入，處處可用; 我不想要兩個 $ 的調(diào)用方式，或者說可以隨心情的使用; 再者通過Vue對象也可以直接使用。
思路大概理了理，那就開干唄，簡單干脆點，直接上代碼！
'use strict';
function VueBus(Vue) {
let bus = new Vue();
Object.defineProperties(bus, {
on: {
get() {
return this.$on.bind(this);
}
},
once: {
get() {
return this.$once.bind(this);
}
},
off: {
get() {
return this.$off.bind(this);
}
},
emit: {
get() {
return this.$emit.bind(this);
}
}
});
Object.defineProperty(Vue, 'bus', {
get() {
return bus;
}
});
Object.defineProperty(Vue.prototype, '$bus', {
get() {
return bus;
}
});
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(VueBus);
}
return bus;
}
export default VueBus;
來看看使用方式吧，是不是跟想象的一樣簡單，在 main.js 中引入，并通過 vue.use() 注入進來，加載方式就這么簡單。
import EventBus from '@/libs/bus'; Vue.use(EventBus);
使用上更靈活了，想怎么用就怎么用，支持以下幾種方式，至于$off、$once使用上通 $on、$emit一樣。
// 綁定事件
this.$bus.on('send', this.handleSend); // 推薦
this.$bus.$on('send', this.handleSend);
Vue.bus.on('send', this.handleSend);
Vue.bus.$on('send', this.handleSend);
// 分發(fā)事件
this.$bus.emit('send', ''); // 推薦
this.$bus.$emit('send', 'emit');
Vue.bus.emit('send', 'emit');
Vue.bus.$emit('send', 'emit');
上面這幾種方式均可。是不是更靈活了呢。想怎么用就怎么用,再也不用擔心會寫錯調(diào)用方式了。
總結
到此這篇關于Vue eventBus事件總線封裝后再用的文章就介紹到這了,更多相關Vue eventBus事件總線封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue如何實現(xiàn)el-table多選樣式變?yōu)閱芜x效果
這篇文章主要介紹了Vue如何實現(xiàn)el-table多選樣式變?yōu)閱芜x效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue-video-player 通過自定義按鈕組件實現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實現(xiàn)全屏切換效果,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue3+vant4實現(xiàn)pdf文件上傳與預覽組件
這篇文章主要介紹了vue3如何結合vant4實現(xiàn)簡單的pdf文件上傳與預覽組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家詳細介紹了vue.js表格分頁示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
今天小編就為大家分享一篇vue監(jiān)聽input標簽的value值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關資料,文中通過代碼介紹的介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了Vue2遞歸組件實現(xiàn)樹形菜單的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了用Vue編寫抽象組件的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了vue組件之間進行傳值的方法，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09