专业的编程技术博客社区

网站首页 > 博客文章 正文

vue3移除了$on,$off ,$once(vue 移除list中的项)

baijin 2024-10-28 14:49:18 博客文章 10 ℃ 0 评论

vue2 可以使用$on,$off ,$once 进行组件间通信,虽然不建议使用全局event bus进行组件间通信,但一定情况下还是很方便的

//eventBus.js 
const eventBus = new Vue() 
export default eventBus
// a.vue 
import eventBus from './eventBus' 
export default { 
 mounted() { 
  eventBus.$on('a-event',
   () => { console.log('a') }
  ) 
 },
 beforeDestroy() { 
  eventBus.$off('a-event')
 }
}
// b.vue 
import eventBus from './eventBus' 
export default { 
 methods: { 
  //b组件调用这个方法时候
  //a组件就会打印'a'
  call() { 
   eventBus.$emit('a-event')  
  }
 }
}

但在vue3中已经完全删除了$on, $off ,$once这三个方法

官方推荐使用第三方库 mitt 或者 tiny-emitter

官方给出了vue2升级vue3方案

// eventBus.js 
import emitter from 'tiny-emitter/instance' 
export default { 
 $on: (...args) => emitter.on(...args),
 $once: (...args) => emitter.once(...args), 
 $off: (...args) => emitter.off(...args),
 $emit: (...args) => emitter.emit(...args)
}

平时项目中我们可以单独使用mitt 还蛮方便的


<script src="./mitt.js"></script>
<script>
var mitt=mitt()
mitt.on('go',function(param){
 console.log(param)
})
mitt.on('go',function(param){
 console.log('go'+param)
})
</script>
<script>
 mitt.emit('go','to')
 console.log(mitt)
</script>

看看mitt源码编译成js才几十行

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表