vue3和vue2中bus的使用

说明：为了解决组件间的通信，也就是组件与组件间的数据传递(它们之间毫无关系)；

这里以组件1传递数据到组件2为例

一、vue2中使用bus

1.首先新建一个Bus.js文件

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2.在组件1中引用 传递数据

import Bus from './Bus'
 
export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },
 
  }   

3.在组件2中引用 接收数据

import Bus from './Bus'
 
export default {
    data() {
        return {
            .........
            }
      },
    mounted () {
       Bus.$on('log', content => { 
          console.log(content)
        });    
    }    
} 

4.注意事项

（1）在传递数据的组件中使用Bus.$emit(),在接收数据的组件中使用Bus.$on()

（2）Bus.$emit()的第一个参数要与Bus.$on()的第一个参数一模一样（可以随意命名）

（3）Bus.$emit()的第二个参数是要传递的数据，如果要传递多个数据就以逗号隔开，相当于函数的实参一样

（4）Bus.$on()的第二个参数是箭头函数或者定义的方法，如果要接收多个数据就以逗号隔开，相当于函数的形参

（5）一定要在接收数据的组件页面关闭页面时销毁Bus（卸载生命周期里进行操作），具体如下

beforeDestroy () {
        Bus.$off('updateData', this.getData);
    };//this.getData是自己定义的方法，用来接收数据的

二、vue3中使用bus

1.安装插件

npm install --save mitt

2.在utils文件夹中新建mitt.js文件

import mitt from 'mitt'

const bus = mitt()
export default bus

3.在组件1中引用 传递数据

import bus from '@/utils/mitt'

onMounted(() => {
    getList();
    bus.emit("kanno",666)
});

4.在组件2中引用 接收数据

import bus from '@/utils/mitt'

onMounted(() => {
  bus.on("kanno",(val)=>{
    console.log("val",val);
  })
});

5.注意事项

（1）在传递数据的组件中使用Bus.emit(),在接收数据的组件中使用Bus.on()

（2）Bus.emit()的第一个参数要与Bus.on()的第一个参数一模一样（可以随意命名）

（3）Bus.emit()的第二个参数是要传递的数据，如果要传递多个数据就以逗号隔开，相当于函数的实参一样

（4）Bus.on()的第二个参数是箭头函数或者定义的方法，如果要接收多个数据就以逗号隔开，相当于函数的形参

（5）一定要在接收数据的组件页面关闭页面时销毁Bus（卸载生命周期里进行操作），具体如下

onBeforeUnmount(()=>{
    bus.off("kanno",fn)
})
// fn是用来接收参数的函数

三、说明

vue2和vue3中使用bus最大的区别在于vue2是通过创建新vue实例，而vue3是通过安装插件来使用，其他的使用过程大体一致，使用的方法也一致