vue2与vue3使用EventBus
一、vue2版本
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
<script>
import {EventBus} from './event-bus.js'
export default {
data(){
return{
num:0
}
},
methods:{
add(){
// 发送事件
EventBus.$emit('addition', {
num:this.num++
})
}
}
}
</script>
<script>
import { EventBus } from './event-bus.js'
export default {
data() {
return {
count: 0
}
},
mounted() {
// 接收事件
EventBus.$on('addition', param => {
this.count = this.count + param.num;
})
}
}
</script>
二、vue3版本
// npm install events
import { EventEmitter } from 'events';
export const EventBus = new EventEmitter();
<script setup>
import { EventBus } from '@/utils/event-bus.js'
const func = () => {
EventBus.emit('indexReload') // 发送事件
}
</script>
<script setup>
import { EventBus } from '@/utils/event-bus.js'
onMounted(()=>{
EventBus.on('indexReload', () => { // 接收事件
// ....
});
})
</script>