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这三个方法
VUE 3移除了Events API 官方推荐使用第三方库 mitt 或者 tiny-emitter
官方给出了升级方案---
// eventBus.js
import mitt from 'mitt'
export default {
$on: (...args) => mitt.on(...args),
$once: (...args) => mitt.once(...args),
$off: (...args) => mitt.off(...args),
$emit: (...args) => mitt.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>
VUE 3移除了Events API 看看mitt源码编译成js才几十行
VUE 3移除了Events API
VUE 3移除了Events API