vue2 vue3 全局事件总线

1.创建

// vue2
1.main.js文件

new Vue({
 render: h => h(App),
 beforeCreate(){
     Vue.prototype.$bus = this; // 全局事件总线 作用：兄弟组件间传数据
 }
}).$mount('#app')


// vue3
1.npm install --save mitt
2.创建eventBus.js
import mitt from 'mitt'
const emitter = mitt()
export default emitter

2.接收

// vue2
mounted(){
    this.$bus.$on('hello', data => {
        console.log('收到了数据', data);
    })
},
beforeDestroy(){
    this.$bus.$off('hello') // 别忘了删掉
}

// vue3
import emitter from '@/eventBus'
onMounted(() => {
  emitter.on('hello', data => {
    console.log('收到了数据', data);
  })
})

onBeforeUnmount(() => {
  emitter.off('hello') // 别忘了删掉
})

3.传送

// vue2
methods:{
    sendData(){
      this.$bus.$emit('hello', 666)
    }
}

// vue3
import emitter from '@/eventBus'
const changePropsData = () => {
  emitter.emit('hello', 666)
}