本篇内容介绍了“Vue3中的事件总线怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
Vue2中的$on、$once、$emit本质上就是其内部实现了一个EventEmitter(事件派发器)，每一个事件都和若干回调相对应，只要事件被触发，那么就将执行此事件所有对应的回调。同时，在JavaScript中，该思想被广泛地使用，尤其在Node.js的事件机制中，就是创建了一个EventEmitter实例，具体请自行查阅相关资料。因此，我们只需要实现一个简单的EventEmitter，并全局传递到每一个组件中，就可以实现一个事件总线了。而全局传递，我们可以使用config.globalProperties绑定到每一个组件，也可以在根组件（main）中，通过provide提供总线，需要使用的组件使用inject注入。下面就让我们来实现一下吧。
由于我们可能会有多条总线，我们还是把EventEmitter写成类的方式，每一条总线都将是一个EventEmitter实例。以下是EventEmitter的简单实现，其只实现了on、once、emit三个API。
计算
安全
数据库
网络和加速
企业服务
class EventEmitter{
constructor(){
this.callbacks={};
}
on(envetName,callback){
if(!Array.isArray(this.callbacks[envetName])){
this.callbacks[envetName]=[];
}
this.callbacks[envetName].push(callback);
}
emit(eventName,...args){
if(Array.isArray(this.callbacks[eventName])){
this.callbacks[eventName].forEach(callback=>callback(...args));
}
}
off(eventName,callback){
if(!Array.isArray(this.callbacks[eventName])){
return
}
if(callback){
this.callbacks[eventName].forEach(cb=>{
if(callback===cb){
this.callbacks[eventName].splice(this.callbacks[eventName].indexOf(callback),1);
}
});
} else{
this.callbacks[eventName]=[];
}
}
once(eventName,callback){
const that=this;
const fn=function(){
callback.apply(that,[...arguments]);
that.off(eventName,fn);
}
that.on(eventName,fn);
}
}在main.js中
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app=createApp(App);
app.config.globalProperties.$event=new EventEmitter();
app.mount('#app')在组件中：
//Comp1
<script setup>
import {getCurrentInstance} from "vue"
const vm=getCurrentInstance();
vm.proxy.$event.on('test',()=>{
console.log('test event emit!')
})
</script>
//Comp2
<script setup>
import {getCurrentInstance} from "vue"
const vm=getCurrentInstance();
vm.proxy.$event.emit('test',"a","b")
</script>但这种方法不太优雅，不方便定义多条总线，建议使用下述的方法。
在main.js中
provide("eventBus1",new EventEmitter());
provide("eventBus2",new EventEmitter());在组件中
//Comp1
<script setup>
import {inject} from "vue";
const bus1=inject("eventBus1")
bus1.on("bus1-on-event",()=>{
console.log('eventBus1 on event emit!')
})
</script>
//Comp2
<script setup>
import {inject} from "vue";
const bus1=inject("eventBus1")
const bus2=inject("eventBus2")
bus2.on("bus2-on-event",()=>{
console.log('eventBus2 on event emit!')
})
bus1.emit("bus1-on-event")
</script>
//Comp3
<script setup>
import {inject} from "vue";
const bus2=inject("eventBus2")
bus2.emit("bus2-on-event")
</script>此方法中，使用inject也比使用getCurrentInstance再.proxy更优雅一些，且不使用就不必使用inject注入。
“Vue3中的事件总线怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7219104015056224316
