vue3+ts使用bus事件總線的示例代碼
1、在vue2中我是這樣使用的
//創(chuàng)建一個(gè)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);
//可根據(jù)this.$bus._events['事件名'] 來查看是否存在該事件監(jiān)聽2、在vue3中使用
//在vue3中需要使用mitt插件，直接下載即可
//創(chuàng)建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
//如果需要掛在其他的全局變量上，需要到聲明文件聲明補(bǔ)充：下面看下vue總線機(jī)制(bus)
vue中非父子組件之間通信除了使用vuex，也可以通過bus總線，兩者適用場景不同。
bus適合小項(xiàng)目、數(shù)據(jù)被更少組件使用的項(xiàng)目，對于中大型項(xiàng)目 數(shù)據(jù)在很多組件之間使用的情況 bus就不太適用了。bus其實(shí)就是一個(gè)發(fā)布訂閱模式，利用vue的自定義事件機(jī)制，在觸發(fā)的地方通過$emit向外發(fā)布一個(gè)事件,在需要監(jiān)聽的頁面，通過 $on監(jiān)聽事件。
vuex適用中大型項(xiàng)目、數(shù)據(jù)在多組件之間公用的情況。
組件通信bus的使用
在utils文件下下創(chuàng)建bus.js
// utils - bus.js import Vue from 'vue' const bus = new Vue() export default bus
一、傳值
發(fā)送信息
import bus from '@/utils/bus'
第一個(gè)參數(shù)為標(biāo)志變量，第二個(gè)參數(shù)為通信的值
us.$emit('message', 'hello');接收信息
import bus from '@/utils/bus'
第一個(gè)參數(shù)為標(biāo)志變量，第二個(gè)參數(shù)中的e為通信的值
bus.$on('message', (e) => {
?console.log(e)
})二、調(diào)用方法
一個(gè)組件(A)調(diào)用另一個(gè)組件(B)的方法
B組件的方法
import bus from '@/utils/bus'
mounted () {?
?bus.$on('testA', this.testA)?
},
testA () {
?console.log('由A組件調(diào)用')
}A組件調(diào)用
import bus from '@/utils/bus'
mounted () {
?bus.$emit('testA')
}到此這篇關(guān)于vue3+ts使用bus事件總線的文章就介紹到這了,更多相關(guān)vue3事件總線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項(xiàng)式API?組合式API以及setup三種不同實(shí)現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
vue2安裝vue-router報(bào)錯(cuò)的解決方法
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認(rèn)真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue-route路由管理的安裝與配置,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問題排查及解決
使用vue3+vite開發(fā)的時(shí)候,導(dǎo)入svg圖片時(shí),同一個(gè)文件夾下的文件,其中一個(gè)路徑正常解析,另一個(gè)不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問題排查及解決,需要的朋友可以參考下2024-03-03
vue項(xiàng)目打包清除console.log的4種方法
項(xiàng)目打包的時(shí)候想要?jiǎng)h除console.log,本文主要介紹了vue項(xiàng)目打包清除console.log的4種方法,具有一定的參考價(jià)值,感興趣的可以了解游戲2023-11-11
這篇文章主要介紹了vue3的動態(tài)組件是如何工作的，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue數(shù)字金額動態(tài)變化功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字金額動態(tài)變化效果，數(shù)字動態(tài)變化是我們在前端開發(fā)中經(jīng)常需要做的效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue.js body的css不生效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06