vue2中bus的使用

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

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

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是自己定义的方法，用来接收数据的