vue兄弟组件如何传值？兄弟组件如何相互操作组件里面的函数？
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据
2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。
3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。
4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。
实例如下：
我们可以创建一个单独的js文件eventVue.js,内容如下
import Vue from 'vue' export default new Vue
假如父组件如下：
<template> <components-a></components-a> <components-b></components-b> </template>
子组件a如下：
<template> <div class="components-a"> <button @click="abtn">A按钮</button> </div> </template> <script> import eventVue from '../../js/event.js' export default { name: 'app', data () { return { ‘msg':"我是组件A" } }, methods:{ abtn:function(){ eventVue .$emit("myFun",this.msg) //$emit这个方法会触发一个事件 } } } </script>
子组件b如下：
<template> <div class="components-a"> <div>{{btext}}</div> </div> </template> <script> import eventVue from '../../js/event.js' export default { name: 'app', data () { return { 'btext':"我是B组件内容" } }, created:function(){ this.bbtn(); }, methods:{ bbtn:function(){ eventVue.$on("myFun",(message)=>{ //这里最好用箭头函数，不然this指向有问题 this.btext = message }) } } } </script>
这样在子组件a里面点击函数就可以改变兄弟组件b里面的值了。
简单方法：
具体可以这样：
在main.js注册一个全局bus：
Vue.prototype.bus = new Vue()
然后在其他需Vue.prototype.bus = new Vue()要传数据的地方可以考虑父子组件的通信方式：
接受数据的地方：
this.bus.on('click', data => {})
输出数据的地方：
this.bus.$emit('click', 'some message')
