vue3+ts使用bus事件總線的示例代碼

Posted on by

1、在vue2中我是這樣使用的

//創建一個vueBus.js
import Bus from 'vue';
let install = function (Vue) {
Vue.prototype.$bus = new Bus()
}

export default {
install
};

//在main.js中引入
import vueBus from '@/utils/vueBus';
Vue.use(vueBus);
//可根據this.$bus._events['事件名'] 來查看是否存在該事件監聽

2、在vue3中使用

//在vue3中需要使用mitt插件，直接下載即可
//創建vueBus.ts文件
const init_mitt = mitt()
const emitter:any = {
_events:{},
$emit:init_mitt.emit,
$on:function(t:any,e:any){
this._events[t] = true
init_mitt.on(t,e)
},
$off:function(t:any,e:any){
delete this._events[t]
init_mitt.off(t,e)
}
}
export default emitter

//在main.ts中引入使用
import emitter from '@/utils/vueBus';
app.config.globalProperties.$bus = emitter

//如果需要掛在其他的全局變量上，需要到聲明文件聲明

補充：下面看下vue總線機制(bus)

vue中非父子組件之間通信除瞭使用vuex，也可以通過bus總線，兩者適用場景不同。

bus適合小項目、數據被更少組件使用的項目，對於中大型項目 數據在很多組件之間使用的情況 bus就不太適用瞭。bus其實就是一個發佈訂閱模式，利用vue的自定義事件機制，在觸發的地方通過$emit向外發佈一個事件,在需要監聽的頁面，通過 $on監聽事件。

vuex適用中大型項目、數據在多組件之間公用的情況。

組件通信bus的使用

在utils文件下下創建bus.js

// utils - bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus

一、傳值

發送信息

import bus from '@/utils/bus'

第一個參數為標志變量，第二個參數為通信的值

us.$emit('message', 'hello');

接收信息

import bus from '@/utils/bus'

第一個參數為標志變量，第二個參數中的e為通信的值

bus.$on('message', (e) => {
 console.log(e)
})

二、調用方法

一個組件(A)調用另一個組件(B)的方法

B組件的方法

import bus from '@/utils/bus'
mounted () { 
 bus.$on('testA', this.testA) 
},
testA () {
 console.log('由A組件調用')
}

A組件調用

import bus from '@/utils/bus'
mounted () {
 bus.$emit('testA')
}

到此這篇關於vue3+ts使用bus事件總線的文章就介紹到這瞭,更多相關vue3事件總線內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：