eventBus使用及其注意事项

兄弟组件之间的传值，可以用eventBus。

使用步骤

1. 创建一个新的文件，即创建一个新的vue实例。

import Vue from 'vue'
export default new Vue()

2.在要发出数据的组件中

import eventBus from '@/utils/eventBus.js'
...
destroyed () {
    eventBus.$emit('myFn', this.file)//myFn是自定义的函数，第二个参数是需要发出的数据
}

注意：最好是在destroyed这个钩子函数中去发出数据，不然拿不到发出的数据。因为路由切换的钩子函数执行顺序是：beforecreated-->created-->beforeMounted-->beforeDestroy-->destroyed-->mounted。在$emit的时候需要已经$on了，才可以监听到。所以最好是在created中$on，在destroyed中$emit。

3.在要接收数据的组件中

import eventBus from '@/utils/eventBus'
...
created () {
    eventBus.$on('myFn', file => {
    this.file = file
    })
}
//file这个形参即为传递过来的数据