【解决】（vue3、mitt.js）mitt.emit 发送消息，但是路由跳转后， mitt.on无法在onMounted中获取数据

【问题】

同事在做vue3的项目时，引入了mitt.js用来进行组件通信；

mitt.js正确引入的前提下，在page1使用mitt.emit 发送消息，路由跳转到page2，但是在page2页面中的onMounted中无法使用mitt.on获取到数据，于是问我这边有没啥想法。

page1示例代码如下：

mitt.emit('showList', data)
router.push({name: 'page2'})

page2示例代码如下：

onMounted(()=>{
	mitt.on('showList', (res)=>{
		// 此时拿不到res
	})
})

【解决】

仔细看了mitt.js教程后，看到如下这样一段话：

意思是我们可以用"*"号监听到所有的事件，然后就打算试一下，page2 中改为如下示例代码：

onMounted(()=>{
	let showFlag;
	 mitt.on('*',(index,data) => {
      if(index == "showList"){
          if(showFlag !== index){
              showFlag = index;
              console.log(data); // 在这里便可以拿到data
          }else{
              return // 防止打印多次
          }
      }else{
          return // 排除其他
      }
  })

})

至此实现想要的效果。

最后

以上就是高挑战斗机为你收集整理的【解决】（vue3、mitt.js）mitt.emit 发送消息，但是路由跳转后， mitt.on无法在onMounted中获取数据的全部内容，希望文章能够帮你解决【解决】（vue3、mitt.js）mitt.emit 发送消息，但是路由跳转后， mitt.on无法在onMounted中获取数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。