本篇内容介绍了“vue3中的事件总线怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!事件总线的本质Vue2中的$on、$once、$e
本篇内容介绍了“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中的事件总线怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!
--结束END--
本文标题: Vue3中的事件总线怎么使用
本文链接: https://www.lsjlt.com/news/356908.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0