原地址：vue -- 非父子组件传值，事件总线（eventbus）的使用方式 - 积少成多 - CSDN博客
下面的组件A和组件B可以是项目中任意两个组件
//在mian.js中
Vue.prototype.bus = new Vue() //这样我们就实现了全局的事件总线对象
//组件A中，监听事件
this.bus.$on('updata', function(data) {
console.log(data) //data就是触发updata事件带过来的数据
})
//组件B中，触发事件
this.bus.$emit('updata', data) //data就是触发updata事件要带走的数据
方式二，稍微有点麻烦，但也很容易理解
大概的实现思路： 新建一个bus.js文件， 在这个文件里实例化一下vue；然后在组件A和组件B中分别引入这个bus.js文件，将事件监听和事件触发都挂到bus.js这个实例上，这样就可以实现全局的监听与触发了
写个例子
bus.js文件
// bus.js文件
import Vue from 'vue'
export default new Vue()
组件A
// 组件A ，监听事件send
<template>
<div>
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: ''
}
},
created() {
let _this = this
// 用$on监听事件并接受数据
Bus.$on('send', (data) => {
_this.name = data
console.log(data)
})
},
methods: {}
}
</script>
组件B
// 组件B， 触发事件send
<template>
<div>
<input type="button" value="点击触发" @click="onClick">
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
elValue: '我是B组件数据'
}
},
methods: {
// 发送数据
onClick() {
Bus.$emit('send', this.elValue)
}
}
}
</script>
