vue2&&script setup中eventbus的使用

文章讲述了作者在遇到Vue2项目中使用scriptsetup语法时,试图通过EventBus传递事件但发现Vue3中的EventBus已被移除。作者计划引入mitt,但在发现项目实际上是Vue2后调整策略。通过`getCurrentInstance`获取到当前实例,从而在scriptsetup中使用$EventBus。
摘要由CSDN通过智能技术生成

起因

看到标题的vue2和script setup放在一起是不是有点懵?没错,我也是!
今天在做需求时需要用到EventBus,但是EventBus在vue3中被移除掉了,由于是新接触的项目,写的时候看用的是script setup,理所当然地认为是vue3,于是各种寻找资料找解决方式,想通过引入mitt来解决。
结果在main里一看,怎么createApp引不进来?再一看,用的是new Vue,难道这项目是vue2!!?于是在命令行输入

npm list vue

好家伙,竟然用的是vue@2.7.14
那就按vue2的方式来处理好了

解决方法

在main.ts中注册一个EventBus

Vue.prototype.$EventBus = new Vue()

问题来了,script setup里似乎没有this,也就没法用this.$EventBus来使用了
最后灵光一现,用了以下方法,在要使用的组件中:

import {getCurrentInstance} from 'vue'
<script setup>
const {proxy} : any = getCurrentInstance()
onMounted(()=>{
	proxy.$EventBus.$emit('msg','msg')
})
</script>

即可。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值