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才几十行
本文暂时没有评论,来添加一个吧(●'◡'●)