Vue 解决兄弟组件之间传值问题

1.通过创建.js文件局部方式来实现，在需要用到的组件中引入，然后调用它即可

在项目的utils文件中创建一个js文件，在正常的项目种，会用utils来存放哪些共用的js文件，这些js文件是一些常用的方法或例如这个bus

js

1.  import Vue from 'vue';
1.  export default new Vue();

接下来，哪个组件需要发车你就在哪里import给它建立一个发车点

// 在 vue组件中引入
import bus from "../../utils/bus";

然后这里我们在vue的实例中的methods函数中定义一个方法来触发这个bus发车

1.  \
    methods: {
1.  busFun(data) {
1.  // 通过 $emit 来触发方法，参数1 是定义方法名，参数2 是你要发送的数据
1.  bus.$emit('name', data)
1.  },
1.  }

这里千万要注意了，若你使用多个bus 那么参数1命名千万别重复，否则其他组件会出现无故上车的情况，这个bus中可以给无数个组件使用，但是命名不能重复，除非你创建多个bus。

接下来我们就看看这辆巴士有哪个组件要上车。

同样，如果其他组件要上车，我们必须要在这个组件中设立一个车站，不然巴士不知道要在哪里接这个组件。

    // 这个组件需要上车，我们先设立一个车站
1.  import bus from "../../utils/bus";

设立车站后，我们就需要通过 bus.$on来触发，也就是上车的技能

 created() {
      bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
    },
    // 打卡
    beforeDestroy() {
      bus.$off('name');
    },

执行beforeDestroy来销毁这个bus方法，是避免方法“冗余”，若不清除这个方法，那将会出现多个bus触发，每次都会将这辆bus停留在这个vue的生命周期中，打开控制台你会发现有好多辆bus在这里停留，因为我们每次触发bus时，就会开一辆巴士出来，而不是这辆巴士一直重复开的原因。

2.接下来我们就说一下第二种方式：

// 我们在main.js中用常量创建一个bus，然后将它放入Vue实例的原型对象中。
const bus = new Vue()
Vue.prototype.$bus = bus;

然后我们就可以在全局 通过this.$bus来开巴士了（#滑稽）。接下来只要开稳就可以为所欲为了。

 created() {
      this.$bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
    },
    // 打卡
    beforeDestroy() {
      this.$bus.$off('name');
    },

最后别忘了给乘客打卡哦